@charset "UTF-8";
/*initialize 
npm install sass // start use sass 

-initialize sass project to your device : 
npm install


-handle sass compile and watch
set this script inside script of packege.json file
"compile:sass": "sass --watch  sass/style.scss css/style.css"

handle sass without source map
"compile:sass": "sass --watch --no-source-map  sass/style.scss css/style.css"


- start watch all changes in sass file
command : npm run compile:sass 
*/
/*colors*/
/*classera lite variables*/
/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap");
@font-face {
  font-family: "FontAwesome";
  src: url("../fonts/fontawesome-webfont.eot?v=4.3.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-fw {
  width: 1.28571429em;
  text-align: center;
}

.fa-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}

.fa-ul > li {
  position: relative;
}

.fa-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center;
}

.fa-li.fa-lg {
  left: -1.85714286em;
}

.fa-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eee;
  border-radius: 0.1em;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.fa.pull-left {
  margin-right: 0.3em;
}

.fa.pull-right {
  margin-left: 0.3em;
}

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical {
  filter: none;
}

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x, .fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #fff;
}

.fa-glass:before {
  content: "\f000";
}

.fa-music:before {
  content: "\f001";
}

.fa-search:before {
  content: "\f002";
}

.fa-envelope-o:before {
  content: "\f003";
}

.fa-heart:before {
  content: "\f004";
}

.fa-star:before {
  content: "\f005";
}

.fa-star-o:before {
  content: "\f006";
}

.fa-user:before {
  content: "\f007";
}

.fa-film:before {
  content: "\f008";
}

.fa-th-large:before {
  content: "\f009";
}

.fa-th:before {
  content: "\f00a";
}

.fa-th-list:before {
  content: "\f00b";
}

.fa-check:before {
  content: "\f00c";
}

.fa-remove:before, .fa-close:before, .fa-times:before {
  content: "\f00d";
}

.fa-search-plus:before {
  content: "\f00e";
}

.fa-search-minus:before {
  content: "\f010";
}

.fa-power-off:before {
  content: "\f011";
}

.fa-signal:before {
  content: "\f012";
}

.fa-gear:before, .fa-cog:before {
  content: "\f013";
}

.fa-trash-o:before {
  content: "\f014";
}

.fa-home:before {
  content: "\f015";
}

.fa-file-o:before {
  content: "\f016";
}

.fa-clock-o:before {
  content: "\f017";
}

.fa-road:before {
  content: "\f018";
}

.fa-download:before {
  content: "\f019";
}

.fa-arrow-circle-o-down:before {
  content: "\f01a";
}

.fa-arrow-circle-o-up:before {
  content: "\f01b";
}

.fa-inbox:before {
  content: "\f01c";
}

.fa-play-circle-o:before {
  content: "\f01d";
}

.fa-rotate-right:before, .fa-repeat:before {
  content: "\f01e";
}

.fa-refresh:before {
  content: "\f021";
}

.fa-list-alt:before {
  content: "\f022";
}

.fa-lock:before {
  content: "\f023";
}

.fa-flag:before {
  content: "\f024";
}

.fa-headphones:before {
  content: "\f025";
}

.fa-volume-off:before {
  content: "\f026";
}

.fa-volume-down:before {
  content: "\f027";
}

.fa-volume-up:before {
  content: "\f028";
}

.fa-qrcode:before {
  content: "\f029";
}

.fa-barcode:before {
  content: "\f02a";
}

.fa-tag:before {
  content: "\f02b";
}

.fa-tags:before {
  content: "\f02c";
}

.fa-book:before {
  content: "\f02d";
}

.fa-bookmark:before {
  content: "\f02e";
}

.fa-print:before {
  content: "\f02f";
}

.fa-camera:before {
  content: "\f030";
}

.fa-font:before {
  content: "\f031";
}

.fa-bold:before {
  content: "\f032";
}

.fa-italic:before {
  content: "\f033";
}

.fa-text-height:before {
  content: "\f034";
}

.fa-text-width:before {
  content: "\f035";
}

.fa-align-left:before {
  content: "\f036";
}

.fa-align-center:before {
  content: "\f037";
}

.fa-align-right:before {
  content: "\f038";
}

.fa-align-justify:before {
  content: "\f039";
}

.fa-list:before {
  content: "\f03a";
}

.fa-dedent:before, .fa-outdent:before {
  content: "\f03b";
}

.fa-indent:before {
  content: "\f03c";
}

.fa-video-camera:before {
  content: "\f03d";
}

.fa-photo:before, .fa-image:before, .fa-picture-o:before {
  content: "\f03e";
}

.fa-pencil:before {
  content: "\f040";
}

.fa-map-marker:before {
  content: "\f041";
}

.fa-adjust:before {
  content: "\f042";
}

.fa-tint:before {
  content: "\f043";
}

.fa-edit:before, .fa-pencil-square-o:before {
  content: "\f044";
}

.fa-share-square-o:before {
  content: "\f045";
}

.fa-check-square-o:before {
  content: "\f046";
}

.fa-arrows:before {
  content: "\f047";
}

.fa-step-backward:before {
  content: "\f048";
}

.fa-fast-backward:before {
  content: "\f049";
}

.fa-backward:before {
  content: "\f04a";
}

.fa-play:before {
  content: "\f04b";
}

.fa-pause:before {
  content: "\f04c";
}

.fa-stop:before {
  content: "\f04d";
}

.fa-forward:before {
  content: "\f04e";
}

.fa-fast-forward:before {
  content: "\f050";
}

.fa-step-forward:before {
  content: "\f051";
}

.fa-eject:before {
  content: "\f052";
}

.fa-chevron-left:before {
  content: "\f053";
}

.fa-chevron-right:before {
  content: "\f054";
}

.fa-plus-circle:before {
  content: "\f055";
}

.fa-minus-circle:before {
  content: "\f056";
}

.fa-times-circle:before {
  content: "\f057";
}

.fa-check-circle:before {
  content: "\f058";
}

.fa-question-circle:before {
  content: "\f059";
}

.fa-info-circle:before {
  content: "\f05a";
}

.fa-crosshairs:before {
  content: "\f05b";
}

.fa-times-circle-o:before {
  content: "\f05c";
}

.fa-check-circle-o:before {
  content: "\f05d";
}

.fa-ban:before {
  content: "\f05e";
}

.fa-arrow-left:before {
  content: "\f060";
}

.fa-arrow-right:before {
  content: "\f061";
}

.fa-arrow-up:before {
  content: "\f062";
}

.fa-arrow-down:before {
  content: "\f063";
}

.fa-mail-forward:before, .fa-share:before {
  content: "\f064";
}

.fa-expand:before {
  content: "\f065";
}

.fa-compress:before {
  content: "\f066";
}

.fa-plus:before {
  content: "\f067";
}

.fa-minus:before {
  content: "\f068";
}

.fa-asterisk:before {
  content: "\f069";
}

.fa-exclamation-circle:before {
  content: "\f06a";
}

.fa-gift:before {
  content: "\f06b";
}

.fa-leaf:before {
  content: "\f06c";
}

.fa-fire:before {
  content: "\f06d";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-eye-slash:before {
  content: "\f070";
}

.fa-warning:before, .fa-exclamation-triangle:before {
  content: "\f071";
}

.fa-plane:before {
  content: "\f072";
}

.fa-calendar:before {
  content: "\f073";
}

.fa-random:before {
  content: "\f074";
}

.fa-comment:before {
  content: "\f075";
}

.fa-magnet:before {
  content: "\f076";
}

.fa-chevron-up:before {
  content: "\f077";
}

.fa-chevron-down:before {
  content: "\f078";
}

.fa-retweet:before {
  content: "\f079";
}

.fa-shopping-cart:before {
  content: "\f07a";
}

.fa-folder:before {
  content: "\f07b";
}

.fa-folder-open:before {
  content: "\f07c";
}

.fa-arrows-v:before {
  content: "\f07d";
}

.fa-arrows-h:before {
  content: "\f07e";
}

.fa-bar-chart-o:before, .fa-bar-chart:before {
  content: "\f080";
}

.fa-twitter-square:before {
  content: "\f081";
}

.fa-facebook-square:before {
  content: "\f082";
}

.fa-camera-retro:before {
  content: "\f083";
}

.fa-key:before {
  content: "\f084";
}

.fa-gears:before, .fa-cogs:before {
  content: "\f085";
}

.fa-comments:before {
  content: "\f086";
}

.fa-thumbs-o-up:before {
  content: "\f087";
}

.fa-thumbs-o-down:before {
  content: "\f088";
}

.fa-star-half:before {
  content: "\f089";
}

.fa-heart-o:before {
  content: "\f08a";
}

.fa-sign-out:before {
  content: "\f08b";
}

.fa-linkedin-square:before {
  content: "\f08c";
}

.fa-thumb-tack:before {
  content: "\f08d";
}

.fa-external-link:before {
  content: "\f08e";
}

.fa-sign-in:before {
  content: "\f090";
}

.fa-trophy:before {
  content: "\f091";
}

.fa-github-square:before {
  content: "\f092";
}

.fa-upload:before {
  content: "\f093";
}

.fa-lemon-o:before {
  content: "\f094";
}

.fa-phone:before {
  content: "\f095";
}

.fa-square-o:before {
  content: "\f096";
}

.fa-bookmark-o:before {
  content: "\f097";
}

.fa-phone-square:before {
  content: "\f098";
}

.fa-twitter:before {
  content: "\f099";
}

.fa-facebook-f:before, .fa-facebook:before {
  content: "\f09a";
}

.fa-github:before {
  content: "\f09b";
}

.fa-unlock:before {
  content: "\f09c";
}

.fa-credit-card:before {
  content: "\f09d";
}

.fa-rss:before {
  content: "\f09e";
}

.fa-hdd-o:before {
  content: "\f0a0";
}

.fa-bullhorn:before {
  content: "\f0a1";
}

.fa-bell:before {
  content: "\f0f3";
}

.fa-certificate:before {
  content: "\f0a3";
}

.fa-hand-o-right:before {
  content: "\f0a4";
}

.fa-hand-o-left:before {
  content: "\f0a5";
}

.fa-hand-o-up:before {
  content: "\f0a6";
}

.fa-hand-o-down:before {
  content: "\f0a7";
}

.fa-arrow-circle-left:before {
  content: "\f0a8";
}

.fa-arrow-circle-right:before {
  content: "\f0a9";
}

.fa-arrow-circle-up:before {
  content: "\f0aa";
}

.fa-arrow-circle-down:before {
  content: "\f0ab";
}

.fa-globe:before {
  content: "\f0ac";
}

.fa-wrench:before {
  content: "\f0ad";
}

.fa-tasks:before {
  content: "\f0ae";
}

.fa-filter:before {
  content: "\f0b0";
}

.fa-briefcase:before {
  content: "\f0b1";
}

.fa-arrows-alt:before {
  content: "\f0b2";
}

.fa-group:before, .fa-users:before {
  content: "\f0c0";
}

.fa-chain:before, .fa-link:before {
  content: "\f0c1";
}

.fa-cloud:before {
  content: "\f0c2";
}

.fa-flask:before {
  content: "\f0c3";
}

.fa-cut:before, .fa-scissors:before {
  content: "\f0c4";
}

.fa-copy:before, .fa-files-o:before {
  content: "\f0c5";
}

.fa-paperclip:before {
  content: "\f0c6";
}

.fa-save:before, .fa-floppy-o:before {
  content: "\f0c7";
}

.fa-square:before {
  content: "\f0c8";
}

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
  content: "\f0c9";
}

.fa-list-ul:before {
  content: "\f0ca";
}

.fa-list-ol:before {
  content: "\f0cb";
}

.fa-strikethrough:before {
  content: "\f0cc";
}

.fa-underline:before {
  content: "\f0cd";
}

.fa-table:before {
  content: "\f0ce";
}

.fa-magic:before {
  content: "\f0d0";
}

.fa-truck:before {
  content: "\f0d1";
}

.fa-pinterest:before {
  content: "\f0d2";
}

.fa-pinterest-square:before {
  content: "\f0d3";
}

.fa-google-plus-square:before {
  content: "\f0d4";
}

.fa-google-plus:before {
  content: "\f0d5";
}

.fa-money:before {
  content: "\f0d6";
}

.fa-caret-down:before {
  content: "\f0d7";
}

.fa-caret-up:before {
  content: "\f0d8";
}

.fa-caret-left:before {
  content: "\f0d9";
}

.fa-caret-right:before {
  content: "\f0da";
}

.fa-columns:before {
  content: "\f0db";
}

.fa-unsorted:before, .fa-sort:before {
  content: "\f0dc";
}

.fa-sort-down:before, .fa-sort-desc:before {
  content: "\f0dd";
}

.fa-sort-up:before, .fa-sort-asc:before {
  content: "\f0de";
}

.fa-envelope:before {
  content: "\f0e0";
}

.fa-linkedin:before {
  content: "\f0e1";
}

.fa-rotate-left:before, .fa-undo:before {
  content: "\f0e2";
}

.fa-legal:before, .fa-gavel:before {
  content: "\f0e3";
}

.fa-dashboard:before, .fa-tachometer:before {
  content: "\f0e4";
}

.fa-comment-o:before {
  content: "\f0e5";
}

.fa-comments-o:before {
  content: "\f0e6";
}

.fa-flash:before, .fa-bolt:before {
  content: "\f0e7";
}

.fa-sitemap:before {
  content: "\f0e8";
}

.fa-umbrella:before {
  content: "\f0e9";
}

.fa-paste:before, .fa-clipboard:before {
  content: "\f0ea";
}

.fa-lightbulb-o:before {
  content: "\f0eb";
}

.fa-exchange:before {
  content: "\f0ec";
}

.fa-cloud-download:before {
  content: "\f0ed";
}

.fa-cloud-upload:before {
  content: "\f0ee";
}

.fa-user-md:before {
  content: "\f0f0";
}

.fa-stethoscope:before {
  content: "\f0f1";
}

.fa-suitcase:before {
  content: "\f0f2";
}

.fa-bell-o:before {
  content: "\f0a2";
}

.fa-coffee:before {
  content: "\f0f4";
}

.fa-cutlery:before {
  content: "\f0f5";
}

.fa-file-text-o:before {
  content: "\f0f6";
}

.fa-building-o:before {
  content: "\f0f7";
}

.fa-hospital-o:before {
  content: "\f0f8";
}

.fa-ambulance:before {
  content: "\f0f9";
}

.fa-medkit:before {
  content: "\f0fa";
}

.fa-fighter-jet:before {
  content: "\f0fb";
}

.fa-beer:before {
  content: "\f0fc";
}

.fa-h-square:before {
  content: "\f0fd";
}

.fa-plus-square:before {
  content: "\f0fe";
}

.fa-angle-double-left:before {
  content: "\f100";
}

.fa-angle-double-right:before {
  content: "\f101";
}

.fa-angle-double-up:before {
  content: "\f102";
}

.fa-angle-double-down:before {
  content: "\f103";
}

.fa-angle-left:before {
  content: "\f104";
}

.fa-angle-right:before {
  content: "\f105";
}

.fa-angle-up:before {
  content: "\f106";
}

.fa-angle-down:before {
  content: "\f107";
}

.fa-desktop:before {
  content: "\f108";
}

.fa-laptop:before {
  content: "\f109";
}

.fa-tablet:before {
  content: "\f10a";
}

.fa-mobile-phone:before, .fa-mobile:before {
  content: "\f10b";
}

.fa-circle-o:before {
  content: "\f10c";
}

.fa-quote-left:before {
  content: "\f10d";
}

.fa-quote-right:before {
  content: "\f10e";
}

.fa-spinner:before {
  content: "\f110";
}

.fa-circle:before {
  content: "\f111";
}

.fa-mail-reply:before, .fa-reply:before {
  content: "\f112";
}

.fa-github-alt:before {
  content: "\f113";
}

.fa-folder-o:before {
  content: "\f114";
}

.fa-folder-open-o:before {
  content: "\f115";
}

.fa-smile-o:before {
  content: "\f118";
}

.fa-frown-o:before {
  content: "\f119";
}

.fa-meh-o:before {
  content: "\f11a";
}

.fa-gamepad:before {
  content: "\f11b";
}

.fa-keyboard-o:before {
  content: "\f11c";
}

.fa-flag-o:before {
  content: "\f11d";
}

.fa-flag-checkered:before {
  content: "\f11e";
}

.fa-terminal:before {
  content: "\f120";
}

.fa-code:before {
  content: "\f121";
}

.fa-mail-reply-all:before, .fa-reply-all:before {
  content: "\f122";
}

.fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before {
  content: "\f123";
}

.fa-location-arrow:before {
  content: "\f124";
}

.fa-crop:before {
  content: "\f125";
}

.fa-code-fork:before {
  content: "\f126";
}

.fa-unlink:before, .fa-chain-broken:before {
  content: "\f127";
}

.fa-question:before {
  content: "\f128";
}

.fa-info:before {
  content: "\f129";
}

.fa-exclamation:before {
  content: "\f12a";
}

.fa-superscript:before {
  content: "\f12b";
}

.fa-subscript:before {
  content: "\f12c";
}

.fa-eraser:before {
  content: "\f12d";
}

.fa-puzzle-piece:before {
  content: "\f12e";
}

.fa-microphone:before {
  content: "\f130";
}

.fa-microphone-slash:before {
  content: "\f131";
}

.fa-shield:before {
  content: "\f132";
}

.fa-calendar-o:before {
  content: "\f133";
}

.fa-fire-extinguisher:before {
  content: "\f134";
}

.fa-rocket:before {
  content: "\f135";
}

.fa-maxcdn:before {
  content: "\f136";
}

.fa-chevron-circle-left:before {
  content: "\f137";
}

.fa-chevron-circle-right:before {
  content: "\f138";
}

.fa-chevron-circle-up:before {
  content: "\f139";
}

.fa-chevron-circle-down:before {
  content: "\f13a";
}

.fa-html5:before {
  content: "\f13b";
}

.fa-css3:before {
  content: "\f13c";
}

.fa-anchor:before {
  content: "\f13d";
}

.fa-unlock-alt:before {
  content: "\f13e";
}

.fa-bullseye:before {
  content: "\f140";
}

.fa-ellipsis-h:before {
  content: "\f141";
}

.fa-ellipsis-v:before {
  content: "\f142";
}

.fa-rss-square:before {
  content: "\f143";
}

.fa-play-circle:before {
  content: "\f144";
}

.fa-ticket:before {
  content: "\f145";
}

.fa-minus-square:before {
  content: "\f146";
}

.fa-minus-square-o:before {
  content: "\f147";
}

.fa-level-up:before {
  content: "\f148";
}

.fa-level-down:before {
  content: "\f149";
}

.fa-check-square:before {
  content: "\f14a";
}

.fa-pencil-square:before {
  content: "\f14b";
}

.fa-external-link-square:before {
  content: "\f14c";
}

.fa-share-square:before {
  content: "\f14d";
}

.fa-compass:before {
  content: "\f14e";
}

.fa-toggle-down:before, .fa-caret-square-o-down:before {
  content: "\f150";
}

.fa-toggle-up:before, .fa-caret-square-o-up:before {
  content: "\f151";
}

.fa-toggle-right:before, .fa-caret-square-o-right:before {
  content: "\f152";
}

.fa-euro:before, .fa-eur:before {
  content: "\f153";
}

.fa-gbp:before {
  content: "\f154";
}

.fa-dollar:before, .fa-usd:before {
  content: "\f155";
}

.fa-rupee:before, .fa-inr:before {
  content: "\f156";
}

.fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before {
  content: "\f157";
}

.fa-ruble:before, .fa-rouble:before, .fa-rub:before {
  content: "\f158";
}

.fa-won:before, .fa-krw:before {
  content: "\f159";
}

.fa-bitcoin:before, .fa-btc:before {
  content: "\f15a";
}

.fa-file:before {
  content: "\f15b";
}

.fa-file-text:before {
  content: "\f15c";
}

.fa-sort-alpha-asc:before {
  content: "\f15d";
}

.fa-sort-alpha-desc:before {
  content: "\f15e";
}

.fa-sort-amount-asc:before {
  content: "\f160";
}

.fa-sort-amount-desc:before {
  content: "\f161";
}

.fa-sort-numeric-asc:before {
  content: "\f162";
}

.fa-sort-numeric-desc:before {
  content: "\f163";
}

.fa-thumbs-up:before {
  content: "\f164";
}

.fa-thumbs-down:before {
  content: "\f165";
}

.fa-youtube-square:before {
  content: "\f166";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-xing:before {
  content: "\f168";
}

.fa-xing-square:before {
  content: "\f169";
}

.fa-youtube-play:before {
  content: "\f16a";
}

.fa-dropbox:before {
  content: "\f16b";
}

.fa-stack-overflow:before {
  content: "\f16c";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-flickr:before {
  content: "\f16e";
}

.fa-adn:before {
  content: "\f170";
}

.fa-bitbucket:before {
  content: "\f171";
}

.fa-bitbucket-square:before {
  content: "\f172";
}

.fa-tumblr:before {
  content: "\f173";
}

.fa-tumblr-square:before {
  content: "\f174";
}

.fa-long-arrow-down:before {
  content: "\f175";
}

.fa-long-arrow-up:before {
  content: "\f176";
}

.fa-long-arrow-left:before {
  content: "\f177";
}

.fa-long-arrow-right:before {
  content: "\f178";
}

.fa-apple:before {
  content: "\f179";
}

.fa-windows:before {
  content: "\f17a";
}

.fa-android:before {
  content: "\f17b";
}

.fa-linux:before {
  content: "\f17c";
}

.fa-dribbble:before {
  content: "\f17d";
}

.fa-skype:before {
  content: "\f17e";
}

.fa-foursquare:before {
  content: "\f180";
}

.fa-trello:before {
  content: "\f181";
}

.fa-female:before {
  content: "\f182";
}

.fa-male:before {
  content: "\f183";
}

.fa-gittip:before, .fa-gratipay:before {
  content: "\f184";
}

.fa-sun-o:before {
  content: "\f185";
}

.fa-moon-o:before {
  content: "\f186";
}

.fa-archive:before {
  content: "\f187";
}

.fa-bug:before {
  content: "\f188";
}

.fa-vk:before {
  content: "\f189";
}

.fa-weibo:before {
  content: "\f18a";
}

.fa-renren:before {
  content: "\f18b";
}

.fa-pagelines:before {
  content: "\f18c";
}

.fa-stack-exchange:before {
  content: "\f18d";
}

.fa-arrow-circle-o-right:before {
  content: "\f18e";
}

.fa-arrow-circle-o-left:before {
  content: "\f190";
}

.fa-toggle-left:before, .fa-caret-square-o-left:before {
  content: "\f191";
}

.fa-dot-circle-o:before {
  content: "\f192";
}

.fa-wheelchair:before {
  content: "\f193";
}

.fa-vimeo-square:before {
  content: "\f194";
}

.fa-turkish-lira:before, .fa-try:before {
  content: "\f195";
}

.fa-plus-square-o:before {
  content: "\f196";
}

.fa-space-shuttle:before {
  content: "\f197";
}

.fa-slack:before {
  content: "\f198";
}

.fa-envelope-square:before {
  content: "\f199";
}

.fa-wordpress:before {
  content: "\f19a";
}

.fa-openid:before {
  content: "\f19b";
}

.fa-institution:before, .fa-bank:before, .fa-university:before {
  content: "\f19c";
}

.fa-mortar-board:before, .fa-graduation-cap:before {
  content: "\f19d";
}

.fa-yahoo:before {
  content: "\f19e";
}

.fa-google:before {
  content: "\f1a0";
}

.fa-reddit:before {
  content: "\f1a1";
}

.fa-reddit-square:before {
  content: "\f1a2";
}

.fa-stumbleupon-circle:before {
  content: "\f1a3";
}

.fa-stumbleupon:before {
  content: "\f1a4";
}

.fa-delicious:before {
  content: "\f1a5";
}

.fa-digg:before {
  content: "\f1a6";
}

.fa-pied-piper:before {
  content: "\f1a7";
}

.fa-pied-piper-alt:before {
  content: "\f1a8";
}

.fa-drupal:before {
  content: "\f1a9";
}

.fa-joomla:before {
  content: "\f1aa";
}

.fa-language:before {
  content: "\f1ab";
}

.fa-fax:before {
  content: "\f1ac";
}

.fa-building:before {
  content: "\f1ad";
}

.fa-child:before {
  content: "\f1ae";
}

.fa-paw:before {
  content: "\f1b0";
}

.fa-spoon:before {
  content: "\f1b1";
}

.fa-cube:before {
  content: "\f1b2";
}

.fa-cubes:before {
  content: "\f1b3";
}

.fa-behance:before {
  content: "\f1b4";
}

.fa-behance-square:before {
  content: "\f1b5";
}

.fa-steam:before {
  content: "\f1b6";
}

.fa-steam-square:before {
  content: "\f1b7";
}

.fa-recycle:before {
  content: "\f1b8";
}

.fa-automobile:before, .fa-car:before {
  content: "\f1b9";
}

.fa-cab:before, .fa-taxi:before {
  content: "\f1ba";
}

.fa-tree:before {
  content: "\f1bb";
}

.fa-spotify:before {
  content: "\f1bc";
}

.fa-deviantart:before {
  content: "\f1bd";
}

.fa-soundcloud:before {
  content: "\f1be";
}

.fa-database:before {
  content: "\f1c0";
}

.fa-file-pdf-o:before {
  content: "\f1c1";
}

.fa-file-word-o:before {
  content: "\f1c2";
}

.fa-file-excel-o:before {
  content: "\f1c3";
}

.fa-file-powerpoint-o:before {
  content: "\f1c4";
}

.fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before {
  content: "\f1c5";
}

.fa-file-zip-o:before, .fa-file-archive-o:before {
  content: "\f1c6";
}

.fa-file-sound-o:before, .fa-file-audio-o:before {
  content: "\f1c7";
}

.fa-file-movie-o:before, .fa-file-video-o:before {
  content: "\f1c8";
}

.fa-file-code-o:before {
  content: "\f1c9";
}

.fa-vine:before {
  content: "\f1ca";
}

.fa-codepen:before {
  content: "\f1cb";
}

.fa-jsfiddle:before {
  content: "\f1cc";
}

.fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before {
  content: "\f1cd";
}

.fa-circle-o-notch:before {
  content: "\f1ce";
}

.fa-ra:before, .fa-rebel:before {
  content: "\f1d0";
}

.fa-ge:before, .fa-empire:before {
  content: "\f1d1";
}

.fa-git-square:before {
  content: "\f1d2";
}

.fa-git:before {
  content: "\f1d3";
}

.fa-hacker-news:before {
  content: "\f1d4";
}

.fa-tencent-weibo:before {
  content: "\f1d5";
}

.fa-qq:before {
  content: "\f1d6";
}

.fa-wechat:before, .fa-weixin:before {
  content: "\f1d7";
}

.fa-send:before, .fa-paper-plane:before {
  content: "\f1d8";
}

.fa-send-o:before, .fa-paper-plane-o:before {
  content: "\f1d9";
}

.fa-history:before {
  content: "\f1da";
}

.fa-genderless:before, .fa-circle-thin:before {
  content: "\f1db";
}

.fa-header:before {
  content: "\f1dc";
}

.fa-paragraph:before {
  content: "\f1dd";
}

.fa-sliders:before {
  content: "\f1de";
}

.fa-share-alt:before {
  content: "\f1e0";
}

.fa-share-alt-square:before {
  content: "\f1e1";
}

.fa-bomb:before {
  content: "\f1e2";
}

.fa-soccer-ball-o:before, .fa-futbol-o:before {
  content: "\f1e3";
}

.fa-tty:before {
  content: "\f1e4";
}

.fa-binoculars:before {
  content: "\f1e5";
}

.fa-plug:before {
  content: "\f1e6";
}

.fa-slideshare:before {
  content: "\f1e7";
}

.fa-twitch:before {
  content: "\f1e8";
}

.fa-yelp:before {
  content: "\f1e9";
}

.fa-newspaper-o:before {
  content: "\f1ea";
}

.fa-wifi:before {
  content: "\f1eb";
}

.fa-calculator:before {
  content: "\f1ec";
}

.fa-paypal:before {
  content: "\f1ed";
}

.fa-google-wallet:before {
  content: "\f1ee";
}

.fa-cc-visa:before {
  content: "\f1f0";
}

.fa-cc-mastercard:before {
  content: "\f1f1";
}

.fa-cc-discover:before {
  content: "\f1f2";
}

.fa-cc-amex:before {
  content: "\f1f3";
}

.fa-cc-paypal:before {
  content: "\f1f4";
}

.fa-cc-stripe:before {
  content: "\f1f5";
}

.fa-bell-slash:before {
  content: "\f1f6";
}

.fa-bell-slash-o:before {
  content: "\f1f7";
}

.fa-trash:before {
  content: "\f1f8";
}

.fa-copyright:before {
  content: "\f1f9";
}

.fa-at:before {
  content: "\f1fa";
}

.fa-eyedropper:before {
  content: "\f1fb";
}

.fa-paint-brush:before {
  content: "\f1fc";
}

.fa-birthday-cake:before {
  content: "\f1fd";
}

.fa-area-chart:before {
  content: "\f1fe";
}

.fa-pie-chart:before {
  content: "\f200";
}

.fa-line-chart:before {
  content: "\f201";
}

.fa-lastfm:before {
  content: "\f202";
}

.fa-lastfm-square:before {
  content: "\f203";
}

.fa-toggle-off:before {
  content: "\f204";
}

.fa-toggle-on:before {
  content: "\f205";
}

.fa-bicycle:before {
  content: "\f206";
}

.fa-bus:before {
  content: "\f207";
}

.fa-ioxhost:before {
  content: "\f208";
}

.fa-angellist:before {
  content: "\f209";
}

.fa-cc:before {
  content: "\f20a";
}

.fa-shekel:before, .fa-sheqel:before, .fa-ils:before {
  content: "\f20b";
}

.fa-meanpath:before {
  content: "\f20c";
}

.fa-buysellads:before {
  content: "\f20d";
}

.fa-connectdevelop:before {
  content: "\f20e";
}

.fa-dashcube:before {
  content: "\f210";
}

.fa-forumbee:before {
  content: "\f211";
}

.fa-leanpub:before {
  content: "\f212";
}

.fa-sellsy:before {
  content: "\f213";
}

.fa-shirtsinbulk:before {
  content: "\f214";
}

.fa-simplybuilt:before {
  content: "\f215";
}

.fa-skyatlas:before {
  content: "\f216";
}

.fa-cart-plus:before {
  content: "\f217";
}

.fa-cart-arrow-down:before {
  content: "\f218";
}

.fa-diamond:before {
  content: "\f219";
}

.fa-ship:before {
  content: "\f21a";
}

.fa-user-secret:before {
  content: "\f21b";
}

.fa-motorcycle:before {
  content: "\f21c";
}

.fa-street-view:before {
  content: "\f21d";
}

.fa-heartbeat:before {
  content: "\f21e";
}

.fa-venus:before {
  content: "\f221";
}

.fa-mars:before {
  content: "\f222";
}

.fa-mercury:before {
  content: "\f223";
}

.fa-transgender:before {
  content: "\f224";
}

.fa-transgender-alt:before {
  content: "\f225";
}

.fa-venus-double:before {
  content: "\f226";
}

.fa-mars-double:before {
  content: "\f227";
}

.fa-venus-mars:before {
  content: "\f228";
}

.fa-mars-stroke:before {
  content: "\f229";
}

.fa-mars-stroke-v:before {
  content: "\f22a";
}

.fa-mars-stroke-h:before {
  content: "\f22b";
}

.fa-neuter:before {
  content: "\f22c";
}

.fa-facebook-official:before {
  content: "\f230";
}

.fa-pinterest-p:before {
  content: "\f231";
}

.fa-whatsapp:before {
  content: "\f232";
}

.fa-server:before {
  content: "\f233";
}

.fa-user-plus:before {
  content: "\f234";
}

.fa-user-times:before {
  content: "\f235";
}

.fa-hotel:before, .fa-bed:before {
  content: "\f236";
}

.fa-viacoin:before {
  content: "\f237";
}

.fa-train:before {
  content: "\f238";
}

.fa-subway:before {
  content: "\f239";
}

.fa-medium:before {
  content: "\f23a";
}

@font-face {
  font-family: "typicons";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/typicons.eot");
  src: url("../fonts/typicons.eot?#iefix") format("embedded-opentype"), url("../fonts/typicons.woff") format("woff"), url("../fonts/typicons.ttf") format("truetype"), url("../fonts/typicons.svg#typicons") format("svg");
}
.typcn:before {
  font-family: "typicons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  height: 1em;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.typcn-adjust-brightness:before {
  content: "\e000";
}

.typcn-adjust-contrast:before {
  content: "\e001";
}

.typcn-anchor-outline:before {
  content: "\e002";
}

.typcn-anchor:before {
  content: "\e003";
}

.typcn-archive:before {
  content: "\e004";
}

.typcn-arrow-back-outline:before {
  content: "\e005";
}

.typcn-arrow-back:before {
  content: "\e006";
}

.typcn-arrow-down-outline:before {
  content: "\e007";
}

.typcn-arrow-down-thick:before {
  content: "\e008";
}

.typcn-arrow-down:before {
  content: "\e009";
}

.typcn-arrow-forward-outline:before {
  content: "\e00a";
}

.typcn-arrow-forward:before {
  content: "\e00b";
}

.typcn-arrow-left-outline:before {
  content: "\e00c";
}

.typcn-arrow-left-thick:before {
  content: "\e00d";
}

.typcn-arrow-left:before {
  content: "\e00e";
}

.typcn-arrow-loop-outline:before {
  content: "\e00f";
}

.typcn-arrow-loop:before {
  content: "\e010";
}

.typcn-arrow-maximise-outline:before {
  content: "\e011";
}

.typcn-arrow-maximise:before {
  content: "\e012";
}

.typcn-arrow-minimise-outline:before {
  content: "\e013";
}

.typcn-arrow-minimise:before {
  content: "\e014";
}

.typcn-arrow-move-outline:before {
  content: "\e015";
}

.typcn-arrow-move:before {
  content: "\e016";
}

.typcn-arrow-repeat-outline:before {
  content: "\e017";
}

.typcn-arrow-repeat:before {
  content: "\e018";
}

.typcn-arrow-right-outline:before {
  content: "\e019";
}

.typcn-arrow-right-thick:before {
  content: "\e01a";
}

.typcn-arrow-right:before {
  content: "\e01b";
}

.typcn-arrow-shuffle:before {
  content: "\e01c";
}

.typcn-arrow-sorted-down:before {
  content: "\e01d";
}

.typcn-arrow-sorted-up:before {
  content: "\e01e";
}

.typcn-arrow-sync-outline:before {
  content: "\e01f";
}

.typcn-arrow-sync:before {
  content: "\e020";
}

.typcn-arrow-unsorted:before {
  content: "\e021";
}

.typcn-arrow-up-outline:before {
  content: "\e022";
}

.typcn-arrow-up-thick:before {
  content: "\e023";
}

.typcn-arrow-up:before {
  content: "\e024";
}

.typcn-at:before {
  content: "\e025";
}

.typcn-attachment-outline:before {
  content: "\e026";
}

.typcn-attachment:before {
  content: "\e027";
}

.typcn-backspace-outline:before {
  content: "\e028";
}

.typcn-backspace:before {
  content: "\e029";
}

.typcn-battery-charge:before {
  content: "\e02a";
}

.typcn-battery-full:before {
  content: "\e02b";
}

.typcn-battery-high:before {
  content: "\e02c";
}

.typcn-battery-low:before {
  content: "\e02d";
}

.typcn-battery-mid:before {
  content: "\e02e";
}

.typcn-beaker:before {
  content: "\e02f";
}

.typcn-beer:before {
  content: "\e030";
}

.typcn-bell:before {
  content: "\e031";
}

.typcn-book:before {
  content: "\e032";
}

.typcn-bookmark:before {
  content: "\e033";
}

.typcn-briefcase:before {
  content: "\e034";
}

.typcn-brush:before {
  content: "\e035";
}

.typcn-business-card:before {
  content: "\e036";
}

.typcn-calculator:before {
  content: "\e037";
}

.typcn-calender-outline:before {
  content: "\e038";
}

.typcn-calender:before {
  content: "\e039";
}

.typcn-camera-outline:before {
  content: "\e03a";
}

.typcn-camera:before {
  content: "\e03b";
}

.typcn-cancel-outline:before {
  content: "\e03c";
}

.typcn-cancel:before {
  content: "\e03d";
}

.typcn-chart-area-outline:before {
  content: "\e03e";
}

.typcn-chart-area:before {
  content: "\e03f";
}

.typcn-chart-bar-outline:before {
  content: "\e040";
}

.typcn-chart-bar:before {
  content: "\e041";
}

.typcn-chart-line-outline:before {
  content: "\e042";
}

.typcn-chart-line:before {
  content: "\e043";
}

.typcn-chart-pie-outline:before {
  content: "\e044";
}

.typcn-chart-pie:before {
  content: "\e045";
}

.typcn-chevron-left-outline:before {
  content: "\e046";
}

.typcn-chevron-left:before {
  content: "\e047";
}

.typcn-chevron-right-outline:before {
  content: "\e048";
}

.typcn-chevron-right:before {
  content: "\e049";
}

.typcn-clipboard:before {
  content: "\e04a";
}

.typcn-cloud-storage:before {
  content: "\e04b";
}

.typcn-code-outline:before {
  content: "\e04c";
}

.typcn-code:before {
  content: "\e04d";
}

.typcn-coffee:before {
  content: "\e04e";
}

.typcn-cog-outline:before {
  content: "\e04f";
}

.typcn-cog:before {
  content: "\e050";
}

.typcn-compass:before {
  content: "\e051";
}

.typcn-contacts:before {
  content: "\e052";
}

.typcn-credit-card:before {
  content: "\e053";
}

.typcn-cross:before {
  content: "\e054";
}

.typcn-css3:before {
  content: "\e055";
}

.typcn-database:before {
  content: "\e056";
}

.typcn-delete-outline:before {
  content: "\e057";
}

.typcn-delete:before {
  content: "\e058";
}

.typcn-device-desktop:before {
  content: "\e059";
}

.typcn-device-laptop:before {
  content: "\e05a";
}

.typcn-device-phone:before {
  content: "\e05b";
}

.typcn-device-tablet:before {
  content: "\e05c";
}

.typcn-directions:before {
  content: "\e05d";
}

.typcn-divide-outline:before {
  content: "\e05e";
}

.typcn-divide:before {
  content: "\e05f";
}

.typcn-document-add:before {
  content: "\e060";
}

.typcn-document-delete:before {
  content: "\e061";
}

.typcn-document-text:before {
  content: "\e062";
}

.typcn-document:before {
  content: "\e063";
}

.typcn-download-outline:before {
  content: "\e064";
}

.typcn-download:before {
  content: "\e065";
}

.typcn-dropbox:before {
  content: "\e066";
}

.typcn-edit:before {
  content: "\e067";
}

.typcn-eject-outline:before {
  content: "\e068";
}

.typcn-eject:before {
  content: "\e069";
}

.typcn-equals-outline:before {
  content: "\e06a";
}

.typcn-equals:before {
  content: "\e06b";
}

.typcn-export-outline:before {
  content: "\e06c";
}

.typcn-export:before {
  content: "\e06d";
}

.typcn-eye-outline:before {
  content: "\e06e";
}

.typcn-eye:before {
  content: "\e06f";
}

.typcn-feather:before {
  content: "\e070";
}

.typcn-film:before {
  content: "\e071";
}

.typcn-filter:before {
  content: "\e072";
}

.typcn-flag-outline:before {
  content: "\e073";
}

.typcn-flag:before {
  content: "\e074";
}

.typcn-flash-outline:before {
  content: "\e075";
}

.typcn-flash:before {
  content: "\e076";
}

.typcn-flow-children:before {
  content: "\e077";
}

.typcn-flow-merge:before {
  content: "\e078";
}

.typcn-flow-parallel:before {
  content: "\e079";
}

.typcn-flow-switch:before {
  content: "\e07a";
}

.typcn-folder-add:before {
  content: "\e07b";
}

.typcn-folder-delete:before {
  content: "\e07c";
}

.typcn-folder-open:before {
  content: "\e07d";
}

.typcn-folder:before {
  content: "\e07e";
}

.typcn-gift:before {
  content: "\e07f";
}

.typcn-globe-outline:before {
  content: "\e080";
}

.typcn-globe:before {
  content: "\e081";
}

.typcn-group-outline:before {
  content: "\e082";
}

.typcn-group:before {
  content: "\e083";
}

.typcn-headphones:before {
  content: "\e084";
}

.typcn-heart-full-outline:before {
  content: "\e085";
}

.typcn-heart-half-outline:before {
  content: "\e086";
}

.typcn-heart-outline:before {
  content: "\e087";
}

.typcn-heart:before {
  content: "\e088";
}

.typcn-home-outline:before {
  content: "\e089";
}

.typcn-home:before {
  content: "\e08a";
}

.typcn-html5:before {
  content: "\e08b";
}

.typcn-image-outline:before {
  content: "\e08c";
}

.typcn-image:before {
  content: "\e08d";
}

.typcn-infinity-outline:before {
  content: "\e08e";
}

.typcn-infinity:before {
  content: "\e08f";
}

.typcn-info-large-outline:before {
  content: "\e090";
}

.typcn-info-large:before {
  content: "\e091";
}

.typcn-info-outline:before {
  content: "\e092";
}

.typcn-info:before {
  content: "\e093";
}

.typcn-input-checked-outline:before {
  content: "\e094";
}

.typcn-input-checked:before {
  content: "\e095";
}

.typcn-key-outline:before {
  content: "\e096";
}

.typcn-key:before {
  content: "\e097";
}

.typcn-keyboard:before {
  content: "\e098";
}

.typcn-leaf:before {
  content: "\e099";
}

.typcn-lightbulb:before {
  content: "\e09a";
}

.typcn-link-outline:before {
  content: "\e09b";
}

.typcn-link:before {
  content: "\e09c";
}

.typcn-location-arrow-outline:before {
  content: "\e09d";
}

.typcn-location-arrow:before {
  content: "\e09e";
}

.typcn-location-outline:before {
  content: "\e09f";
}

.typcn-location:before {
  content: "\e0a0";
}

.typcn-lock-closed-outline:before {
  content: "\e0a1";
}

.typcn-lock-closed:before {
  content: "\e0a2";
}

.typcn-lock-open-outline:before {
  content: "\e0a3";
}

.typcn-lock-open:before {
  content: "\e0a4";
}

.typcn-mail:before {
  content: "\e0a5";
}

.typcn-map:before {
  content: "\e0a6";
}

.typcn-media-eject-outline:before {
  content: "\e0a7";
}

.typcn-media-eject:before {
  content: "\e0a8";
}

.typcn-media-fast-forward-outline:before {
  content: "\e0a9";
}

.typcn-media-fast-forward:before {
  content: "\e0aa";
}

.typcn-media-pause-outline:before {
  content: "\e0ab";
}

.typcn-media-pause:before {
  content: "\e0ac";
}

.typcn-media-play-outline:before {
  content: "\e0ad";
}

.typcn-media-play-reverse-outline:before {
  content: "\e0ae";
}

.typcn-media-play-reverse:before {
  content: "\e0af";
}

.typcn-media-play:before {
  content: "\e0b0";
}

.typcn-media-record-outline:before {
  content: "\e0b1";
}

.typcn-media-record:before {
  content: "\e0b2";
}

.typcn-media-rewind-outline:before {
  content: "\e0b3";
}

.typcn-media-rewind:before {
  content: "\e0b4";
}

.typcn-media-stop-outline:before {
  content: "\e0b5";
}

.typcn-media-stop:before {
  content: "\e0b6";
}

.typcn-message-typing:before {
  content: "\e0b7";
}

.typcn-message:before {
  content: "\e0b8";
}

.typcn-messages:before {
  content: "\e0b9";
}

.typcn-microphone-outline:before {
  content: "\e0ba";
}

.typcn-microphone:before {
  content: "\e0bb";
}

.typcn-minus-outline:before {
  content: "\e0bc";
}

.typcn-minus:before {
  content: "\e0bd";
}

.typcn-mortar-board:before {
  content: "\e0be";
}

.typcn-news:before {
  content: "\e0bf";
}

.typcn-notes-outline:before {
  content: "\e0c0";
}

.typcn-notes:before {
  content: "\e0c1";
}

.typcn-pen:before {
  content: "\e0c2";
}

.typcn-pencil:before {
  content: "\e0c3";
}

.typcn-phone-outline:before {
  content: "\e0c4";
}

.typcn-phone:before {
  content: "\e0c5";
}

.typcn-pi-outline:before {
  content: "\e0c6";
}

.typcn-pi:before {
  content: "\e0c7";
}

.typcn-pin-outline:before {
  content: "\e0c8";
}

.typcn-pin:before {
  content: "\e0c9";
}

.typcn-pipette:before {
  content: "\e0ca";
}

.typcn-plane-outline:before {
  content: "\e0cb";
}

.typcn-plane:before {
  content: "\e0cc";
}

.typcn-plug:before {
  content: "\e0cd";
}

.typcn-plus-outline:before {
  content: "\e0ce";
}

.typcn-plus:before {
  content: "\e0cf";
}

.typcn-point-of-interest-outline:before {
  content: "\e0d0";
}

.typcn-point-of-interest:before {
  content: "\e0d1";
}

.typcn-power-outline:before {
  content: "\e0d2";
}

.typcn-power:before {
  content: "\e0d3";
}

.typcn-printer:before {
  content: "\e0d4";
}

.typcn-puzzle-outline:before {
  content: "\e0d5";
}

.typcn-puzzle:before {
  content: "\e0d6";
}

.typcn-radar-outline:before {
  content: "\e0d7";
}

.typcn-radar:before {
  content: "\e0d8";
}

.typcn-refresh-outline:before {
  content: "\e0d9";
}

.typcn-refresh:before {
  content: "\e0da";
}

.typcn-rss-outline:before {
  content: "\e0db";
}

.typcn-rss:before {
  content: "\e0dc";
}

.typcn-scissors-outline:before {
  content: "\e0dd";
}

.typcn-scissors:before {
  content: "\e0de";
}

.typcn-shopping-bag:before {
  content: "\e0df";
}

.typcn-shopping-cart:before {
  content: "\e0e0";
}

.typcn-social-at-circular:before {
  content: "\e0e1";
}

.typcn-social-dribbble-circular:before {
  content: "\e0e2";
}

.typcn-social-dribbble:before {
  content: "\e0e3";
}

.typcn-social-facebook-circular:before {
  content: "\e0e4";
}

.typcn-social-facebook:before {
  content: "\e0e5";
}

.typcn-social-flickr-circular:before {
  content: "\e0e6";
}

.typcn-social-flickr:before {
  content: "\e0e7";
}

.typcn-social-github-circular:before {
  content: "\e0e8";
}

.typcn-social-github:before {
  content: "\e0e9";
}

.typcn-social-google-plus-circular:before {
  content: "\e0ea";
}

.typcn-social-google-plus:before {
  content: "\e0eb";
}

.typcn-social-instagram-circular:before {
  content: "\e0ec";
}

.typcn-social-instagram:before {
  content: "\e0ed";
}

.typcn-social-last-fm-circular:before {
  content: "\e0ee";
}

.typcn-social-last-fm:before {
  content: "\e0ef";
}

.typcn-social-linkedin-circular:before {
  content: "\e0f0";
}

.typcn-social-linkedin:before {
  content: "\e0f1";
}

.typcn-social-pinterest-circular:before {
  content: "\e0f2";
}

.typcn-social-pinterest:before {
  content: "\e0f3";
}

.typcn-social-skype-outline:before {
  content: "\e0f4";
}

.typcn-social-skype:before {
  content: "\e0f5";
}

.typcn-social-tumbler-circular:before {
  content: "\e0f6";
}

.typcn-social-tumbler:before {
  content: "\e0f7";
}

.typcn-social-twitter-circular:before {
  content: "\e0f8";
}

.typcn-social-twitter:before {
  content: "\e0f9";
}

.typcn-social-vimeo-circular:before {
  content: "\e0fa";
}

.typcn-social-vimeo:before {
  content: "\e0fb";
}

.typcn-social-youtube-circular:before {
  content: "\e0fc";
}

.typcn-social-youtube:before {
  content: "\e0fd";
}

.typcn-sort-alphabetically-outline:before {
  content: "\e0fe";
}

.typcn-sort-alphabetically:before {
  content: "\e0ff";
}

.typcn-sort-numerically-outline:before {
  content: "\e100";
}

.typcn-sort-numerically:before {
  content: "\e101";
}

.typcn-spanner-outline:before {
  content: "\e102";
}

.typcn-spanner:before {
  content: "\e103";
}

.typcn-spiral:before {
  content: "\e104";
}

.typcn-star-full-outline:before {
  content: "\e105";
}

.typcn-star-half-outline:before {
  content: "\e106";
}

.typcn-star-half:before {
  content: "\e107";
}

.typcn-star-outline:before {
  content: "\e108";
}

.typcn-star:before {
  content: "\e109";
}

.typcn-starburst-outline:before {
  content: "\e10a";
}

.typcn-starburst:before {
  content: "\e10b";
}

.typcn-stopwatch:before {
  content: "\e10c";
}

.typcn-support:before {
  content: "\e10d";
}

.typcn-tabs-outline:before {
  content: "\e10e";
}

.typcn-tag:before {
  content: "\e10f";
}

.typcn-tags:before {
  content: "\e110";
}

.typcn-th-large-outline:before {
  content: "\e111";
}

.typcn-th-large:before {
  content: "\e112";
}

.typcn-th-list-outline:before {
  content: "\e113";
}

.typcn-th-list:before {
  content: "\e114";
}

.typcn-th-menu-outline:before {
  content: "\e115";
}

.typcn-th-menu:before {
  content: "\e116";
}

.typcn-th-small-outline:before {
  content: "\e117";
}

.typcn-th-small:before {
  content: "\e118";
}

.typcn-thermometer:before {
  content: "\e119";
}

.typcn-thumbs-down:before {
  content: "\e11a";
}

.typcn-thumbs-ok:before {
  content: "\e11b";
}

.typcn-thumbs-up:before {
  content: "\e11c";
}

.typcn-tick-outline:before {
  content: "\e11d";
}

.typcn-tick:before {
  content: "\e11e";
}

.typcn-ticket:before {
  content: "\e11f";
}

.typcn-time:before {
  content: "\e120";
}

.typcn-times-outline:before {
  content: "\e121";
}

.typcn-times:before {
  content: "\e122";
}

.typcn-trash:before {
  content: "\e123";
}

.typcn-tree:before {
  content: "\e124";
}

.typcn-upload-outline:before {
  content: "\e125";
}

.typcn-upload:before {
  content: "\e126";
}

.typcn-user-add-outline:before {
  content: "\e127";
}

.typcn-user-add:before {
  content: "\e128";
}

.typcn-user-delete-outline:before {
  content: "\e129";
}

.typcn-user-delete:before {
  content: "\e12a";
}

.typcn-user-outline:before {
  content: "\e12b";
}

.typcn-user:before {
  content: "\e12c";
}

.typcn-vendor-android:before {
  content: "\e12d";
}

.typcn-vendor-apple:before {
  content: "\e12e";
}

.typcn-vendor-microsoft:before {
  content: "\e12f";
}

.typcn-video-outline:before {
  content: "\e130";
}

.typcn-video:before {
  content: "\e131";
}

.typcn-volume-down:before {
  content: "\e132";
}

.typcn-volume-mute:before {
  content: "\e133";
}

.typcn-volume-up:before {
  content: "\e134";
}

.typcn-volume:before {
  content: "\e135";
}

.typcn-warning-outline:before {
  content: "\e136";
}

.typcn-warning:before {
  content: "\e137";
}

.typcn-watch:before {
  content: "\e138";
}

.typcn-waves-outline:before {
  content: "\e139";
}

.typcn-waves:before {
  content: "\e13a";
}

.typcn-weather-cloudy:before {
  content: "\e13b";
}

.typcn-weather-downpour:before {
  content: "\e13c";
}

.typcn-weather-night:before {
  content: "\e13d";
}

.typcn-weather-partly-sunny:before {
  content: "\e13e";
}

.typcn-weather-shower:before {
  content: "\e13f";
}

.typcn-weather-snow:before {
  content: "\e140";
}

.typcn-weather-stormy:before {
  content: "\e141";
}

.typcn-weather-sunny:before {
  content: "\e142";
}

.typcn-weather-windy-cloudy:before {
  content: "\e143";
}

.typcn-weather-windy:before {
  content: "\e144";
}

.typcn-wi-fi-outline:before {
  content: "\e145";
}

.typcn-wi-fi:before {
  content: "\e146";
}

.typcn-wine:before {
  content: "\e147";
}

.typcn-world-outline:before {
  content: "\e148";
}

.typcn-world:before {
  content: "\e149";
}

.typcn-zoom-in-outline:before {
  content: "\e14a";
}

.typcn-zoom-in:before {
  content: "\e14b";
}

.typcn-zoom-out-outline:before {
  content: "\e14c";
}

.typcn-zoom-out:before {
  content: "\e14d";
}

.typcn-zoom-outline:before {
  content: "\e14e";
}

.typcn-zoom:before {
  content: "\e14f";
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }
  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    -ms-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    -ms-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }
  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    -ms-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}
@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
}
@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
}
.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes slideInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
@keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}
.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
  }
}
@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0deg);
    -ms-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}
@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0deg);
    -ms-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(-2000px);
    transform: scale(0.1) translateY(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(60px);
    transform: scale(0.475) translateY(60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(-2000px);
    -ms-transform: scale(0.1) translateY(-2000px);
    transform: scale(0.1) translateY(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(60px);
    -ms-transform: scale(0.475) translateY(60px);
    transform: scale(0.475) translateY(60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(-2000px);
    transform: scale(0.1) translateX(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(48px);
    transform: scale(0.475) translateX(48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(-2000px);
    -ms-transform: scale(0.1) translateX(-2000px);
    transform: scale(0.1) translateX(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(48px);
    -ms-transform: scale(0.475) translateX(48px);
    transform: scale(0.475) translateX(48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(2000px);
    transform: scale(0.1) translateX(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(-48px);
    transform: scale(0.475) translateX(-48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(2000px);
    -ms-transform: scale(0.1) translateX(2000px);
    transform: scale(0.1) translateX(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(-48px);
    -ms-transform: scale(0.475) translateX(-48px);
    transform: scale(0.475) translateX(-48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(2000px);
    transform: scale(0.1) translateY(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(-60px);
    transform: scale(0.475) translateY(-60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(2000px);
    -ms-transform: scale(0.1) translateY(2000px);
    transform: scale(0.1) translateY(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(-60px);
    -ms-transform: scale(0.475) translateY(-60px);
    transform: scale(0.475) translateY(-60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(-60px);
    transform: scale(0.475) translateY(-60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(2000px);
    transform: scale(0.1) translateY(2000px);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(-60px);
    -ms-transform: scale(0.475) translateY(-60px);
    transform: scale(0.475) translateY(-60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(2000px);
    -ms-transform: scale(0.1) translateY(2000px);
    transform: scale(0.1) translateY(2000px);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(42px);
    transform: scale(0.475) translateX(42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(-2000px);
    transform: scale(0.1) translateX(-2000px);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(42px);
    -ms-transform: scale(0.475) translateX(42px);
    transform: scale(0.475) translateX(42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(-2000px);
    -ms-transform: scale(0.1) translateX(-2000px);
    transform: scale(0.1) translateX(-2000px);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
  }
}
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(-42px);
    transform: scale(0.475) translateX(-42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(2000px);
    transform: scale(0.1) translateX(2000px);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(-42px);
    -ms-transform: scale(0.475) translateX(-42px);
    transform: scale(0.475) translateX(-42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(2000px);
    -ms-transform: scale(0.1) translateX(2000px);
    transform: scale(0.1) translateX(2000px);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
  }
}
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(60px);
    transform: scale(0.475) translateY(60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(-2000px);
    transform: scale(0.1) translateY(-2000px);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateY(60px);
    -ms-transform: scale(0.475) translateY(60px);
    transform: scale(0.475) translateY(60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateY(-2000px);
    -ms-transform: scale(0.1) translateY(-2000px);
    transform: scale(0.1) translateY(-2000px);
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

.fontawesome-icon-list {
  margin: 22px 0 0 0 !important;
}

.fontawesome-icon-list .fa-hover {
  color: #262626;
  display: block;
  height: 36px;
  line-height: 32px;
  padding-left: 10px;
  padding: 2px 0;
}

.fontawesome-icon-list .fa-hover .fa {
  display: inline-block;
  font-size: 14px;
  margin-right: 10px;
  text-align: right;
  width: 32px;
}

.fontawesome-icon-list .fa-hover:hover {
  background-color: #eee;
  color: #000;
  text-decoration: none;
}

.fontawesome-icon-list .fa-hover:hover .fa {
  font-size: 28px;
  vertical-align: -6px;
}

.bs-glyphicons {
  overflow: hidden;
}

.bs-glyphicons li {
  float: left;
  width: 25%;
  height: 115px;
  padding: 10px;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  border: 1px solid #fff;
  background-color: #f9f9f9;
}

.bs-glyphicons li:hover {
  color: #fff;
  background-color: #e46f61;
}

.bs-glyphicons .glyphicon {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 24px;
}

.bs-glyphicons .glyphicon-class {
  display: block;
  text-align: center;
  word-wrap: break-word;
}

.bs-glyphicons-list {
  padding-left: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .bs-glyphicons {
    margin-left: 0;
    margin-right: 0;
  }

  .bs-glyphicons li {
    width: 12.5%;
    font-size: 12px;
  }
}
.weathericons {
  padding: 5px 10px;
  border-radius: 4px;
}

.weathericons:hover {
  background-color: #a0d468;
  color: #fff;
}

.weathericons .icon, .weathericons .class {
  display: inline-block;
}

.weathericons .icon {
  margin-right: 5px;
  font-size: 24px;
}

#typicon-preview {
  margin: 0 auto;
  position: relative;
  text-align: center;
}

#typicon-preview .icon {
  float: left;
  padding: 6px;
  display: inline-block;
  cursor: pointer;
  width: 48px;
  height: 48px;
  text-align: center;
  vertical-align: middle;
  -webkit-border-radius: 6px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 6px;
  -moz-background-clip: padding;
  border-radius: 6px;
  background-clip: padding-box;
  color: #444;
}

#typicon-preview .icon .typcn:before {
  font-size: 24px;
}

#typicon-preview .icon:hover {
  background-color: #ffce55;
  line-height: 38px;
  color: #fff;
}

#typicon-preview .icon:hover .typcn:before {
  font-size: 32px;
}

.chartcontainer {
  width: 100%;
  text-align: center;
}

.easy-pie-chart-preview .well {
  width: 100%;
  height: 250px;
  text-align: center;
  position: relative;
  padding-top: 50px;
}

.easy-pie-chart-preview .well .easyPieChart {
  margin: 0 auto;
}

.sparkline-preview .well {
  text-align: center;
  position: relative;
}

.buttons-preview .btn, .buttons-preview .btn-group {
  margin-bottom: 10px;
  margin-right: 10px;
}

.dropdown-container {
  margin: 0 auto;
  text-align: center;
}

.dropdown-container .dropdown-preview {
  display: inline-block;
  text-align: left;
}

.dropdown-container .dropdown-preview > .dropdown-menu {
  display: block;
  position: static;
  margin-bottom: 5px;
}

#dropdownbuttons .btn {
  margin-top: 10px;
}

.labels-container .label {
  margin: 0 10px 10px 0;
}

.popover-container {
  overflow: auto;
}

.popoverexample .popover {
  position: relative;
  display: block;
  width: 260px;
  margin: 20px;
}

.modal-preview .modal {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  z-index: 1;
  display: block;
  width: auto;
  overflow: hidden;
  max-width: 600px;
}

.modal-preview .modal .modal-dialog {
  width: 90%;
}

.bordered-well-container .well {
  margin-bottom: 0;
}

.knob-container {
  text-align: center;
}

#red, #green, #blue {
  margin: 10px;
  display: inline-block;
  height: 200px;
}

#colorpicker {
  height: 240px;
  width: 100%;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #bfbfbf;
}

#colorpicker .result {
  margin: 60px 30px;
  height: 100px;
  width: 100px;
  display: inline-block;
  vertical-align: top;
  color: #7f7f7f;
  background: #7f7f7f;
  border: 1px solid #fff;
  box-shadow: 0 0 10px;
}

#colors .colored-slider {
  margin-bottom: 20px;
}

#sizes .sized-slider {
  margin-bottom: 20px;
}

.grid-example .row {
  margin-bottom: 15px;
  padding: 0 15px;
}

.grid-example .row [class^=col-] {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

/*.primary_btn{
	@extend .foo;
}*/
/* cyrillic-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local("Roboto Thin"), url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local("Roboto Thin"), url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxMIzIXKMnyrYk.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local("Roboto Thin"), url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxEIzIXKMnyrYk.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxLIzIXKMnyrYk.woff2) format("woff2");
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxHIzIXKMnyrYk.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local("Roboto Thin"), url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxGIzIXKMnyrYk.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local("Roboto Thin"), url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxIIzIXKMny.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto Light"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto Light"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto Light"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto Light"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto Light"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto Light"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto Light"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto Regular"), url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto Regular"), url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto Regular"), url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto Regular"), url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format("woff2");
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto Regular"), url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto Regular"), url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto Regular"), url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto Medium"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto Medium"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto Medium"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto Medium"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto Medium"), url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmYUtfCRc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmYUtfABc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmYUtfCBc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmYUtfBxc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmYUtfCxc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmYUtfChc4AMP6lbBP.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmYUtfBBc4AMP6lQ.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*==================================
  Alert container
====================================*/
#lala-alert-container {
  position: fixed;
  height: auto;
  width: 337px;
  bottom: 0;
  left: 7px;
  z-index: 999999999999;
  max-height: 90%;
}

#lala-alert-wrapper {
  height: auto;
  padding: 15px;
  margin-bottom: -30px;
  overflow: hidden;
}

/*==================================
    Alerts
====================================*/
#lala-alert-container .lala-alert {
  position: relative;
  padding: 25px 30px 20px;
  font-size: 16px;
  margin-bottom: 10px;
  opacity: 1;
  line-height: 1.4;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: default;
  transition: all 0.5s ease-in-out;
  /* Edit for fadeout time */
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Likely future */
}
#lala-alert-container .lala-alert span {
  opacity: 0.7;
  transition: all 0.25s ease-in-out;
  /* Edit for fadeout time */
}
#lala-alert-container .lala-alert span:hover {
  opacity: 1;
}
#lala-alert-container .alert-success {
  color: #ffffff;
  background-color: var(--main-color);
}
#lala-alert-container .alert-success > span {
  color: #0b6f5e;
}
#lala-alert-container .alert-info {
  color: #666;
  background-color: #FFF;
}
#lala-alert-container .alert-info > span {
  color: #666;
}
#lala-alert-container .alert-warning {
  color: #6b7117;
  background-color: #ffee9e;
}
#lala-alert-container .alert-warning > span {
  color: #8a6d3b;
}
#lala-alert-container .alert-danger {
  color: #ffffff;
  background-color: #d64f62;
}
#lala-alert-container .alert-danger > span {
  color: #6f1414;
}

.close-alert-x {
  position: absolute;
  float: right;
  top: 5px;
  left: 10px;
  cursor: pointer;
  outline: none;
}

.fade-out {
  opacity: 0;
}

/*==================================
    Alert Animation
====================================*/
.animation-target {
  animation: animation 1500ms linear both;
}

/* Generated with Bounce.js. Edit at http://goo.gl/BKCT19 */
@-webkit-keyframes myfirst {
  0% {
    opacity: 0.2;
  }
  15% {
    opacity: 0.4;
  }
  25% {
    background-color: #FFF;
  }
  30% {
    background-color: #FFF;
  }
  40% {
    background-color: #FFF;
  }
}
@keyframes animation {
  0% {
    opacity: 0.2;
  }
  15% {
    opacity: 0.4;
  }
  25% {
    background-color: #FFF;
  }
  30% {
    background-color: #FFF;
  }
  40% {
    background-color: #FFF;
  }
}
.tooltips {
  background: #fff;
  color: var(--main-color);
  padding: 10px;
  border-radius: 5px;
  opacity: 0;
  position: absolute;
  word-break: break-all;
  min-width: 200px;
  max-width: 500px;
  display: block;
  z-index: 99;
  top: 31px;
  left: -26px;
  text-align: center;
  border: 1px solid var(--main-color);
}

.tooltips::before {
  background: #fff;
  position: absolute;
  content: "";
  width: 11px;
  height: 11px;
  border-top: 1px solid var(--main-color);
  border-left: 1px solid var(--main-color);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari */
  transform: rotate(45deg);
  /* Standard syntax */
  top: -6px;
  left: 10px;
}

.input-tooltip-wrapper {
  position: relative;
  display: inline;
}

.tooltip-group .form-control {
  display: inline;
}

.tooltip-group .control-label, .tooltip-group label {
  display: block;
}

.input-tooltip-wrapper .wrapper {
  position: absolute;
  left: 30px;
}

.tooltip-icon {
  color: var(--main-color);
  font-size: 12px;
  background: #fff;
  border-radius: 100%;
  border: 1px solid var(--main-color);
  font-weight: bold;
  position: absolute;
  top: 7px;
  font-style: normal;
  width: 19px;
  height: 18px;
  text-align: center;
  padding-top: -2px !important;
  font-family: times new roman;
}

/*!
Chosen, a Select Box Enhancer for jQuery and Prototype

Version 1.4.2
Full source at https://github.com/harvesthq/chosen

do not edit it by hand.
*/
/* @group Base */
.chosen-container {
  margin-top: 0;
  position: relative;
  vertical-align: middle;
  font-size: 13px;
  zoom: 1;
  *display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.chosen-container * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  right: -9999px;
  z-index: 1010;
  width: 93%;
  border: 1px solid #ddd;
  border-top: 0;
  background: #fff;
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.1);
}

.chosen-container.chosen-with-drop .chosen-drop {
  right: 50%;
  transform: translateX(-50%);
}

.chosen-container a {
  cursor: pointer;
}

.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
  margin-left: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
  color: #999999;
}

.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
  content: ":";
  padding-right: 2px;
  vertical-align: top;
}

/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 0 0 8px;
  height: 25px;
  border: 1px solid #aaa;
  border-radius: 5px;
  background-color: #fff;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
  background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background-clip: padding-box;
  box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #444;
  text-decoration: none;
  white-space: nowrap;
  line-height: 24px;
}

.chosen-container-single .chosen-default {
  color: #999;
}

.chosen-container-single .chosen-single span {
  display: block;
  overflow: hidden;
  margin-left: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #808080;
}

.chosen-container-single .chosen-single-with-deselect span {
  margin-left: 38px;
}

.chosen-container-single .chosen-single abbr {
  position: absolute;
  top: 13px;
  left: 26px;
  display: block;
  width: 12px;
  height: 12px;
  background: url("../chosen-sprite.png") -42px 1px no-repeat;
  font-size: 1px;
}

.chosen-container-single .chosen-single abbr:hover {
  background-position: -42px -10px;
}

.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
  background-position: -42px -10px;
}

.chosen-container-single .chosen-single div {
  position: absolute;
  top: 0;
  left: 8px;
  display: block;
  width: 18px;
  height: 100%;
}

.chosen-container-single .chosen-single div b {
  display: block;
  width: 100%;
  height: 100%;
  background: url("../chosen-sprite.png") no-repeat 0px 2px;
}

.chosen-container-single .chosen-search {
  position: relative;
  z-index: 1010;
  margin: 0;
  padding: 3px 4px;
  white-space: nowrap;
}

.chosen-container-single .chosen-search input[type=text] {
  margin: 1px 0;
  padding: 4px 5px 4px 20px;
  width: 100%;
  height: auto;
  outline: 0;
  border: 1px solid #aaa;
  background: white url("../chosen-sprite.png") no-repeat 100% -20px;
  background: url("../chosen-sprite.png") no-repeat 100% -20px;
  font-size: 1em;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 25px;
}

.chosen-container-single .chosen-drop {
  margin-top: -1px;
  border-radius: 0 0 4px 4px;
  background-clip: padding-box;
}

.chosen-container-single.chosen-container-single-nosearch .chosen-search {
  position: absolute;
  right: -9999px;
}

/* @end */
/* @group Results */
.chosen-container .chosen-results {
  color: #444;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 4px 4px 0;
  padding: 0 0 0 4px;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}

.chosen-container .chosen-results li {
  display: none;
  margin: 0;
  padding: 5px 6px;
  list-style: none;
  line-height: 15px;
  word-wrap: break-word;
  -webkit-touch-callout: none;
}

.chosen-container .chosen-results li.active-result {
  display: list-item;
  cursor: pointer;
  color: #444;
}

.chosen-container .chosen-results li.disabled-result {
  display: list-item;
  color: #ccc;
  cursor: default;
}

.chosen-container .chosen-results li.highlighted {
  background-color: var(--main-color);
  color: #fff;
}

.chosen-container .chosen-results li.no-results {
  color: #777;
  display: list-item;
  background: #f4f4f4;
}

.chosen-container .chosen-results li.group-result {
  display: list-item;
  font-weight: bold;
  cursor: default;
}

.chosen-container .chosen-results li.group-option {
  padding-right: 15px;
}

.chosen-container .chosen-results li em {
  font-style: normal;
  text-decoration: underline;
}

/* @end */
/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 7px 15px;
  width: 100%;
  height: auto !important;
  height: 1%;
  border: 1px solid #d5d5d5;
  background-color: #fff;
  cursor: text;
  border-radius: 25px;
  min-height: 45px;
}

.chosen-container-multi .chosen-choices li {
  float: right;
  list-style: none;
}

.chosen-container-multi .chosen-choices li.search-field {
  margin: 0 8px;
  padding: 0;
  white-space: nowrap;
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
  margin: 1px 0;
  padding: 0;
  height: 25px;
  outline: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  color: #858585;
  font-size: 100%;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
  width: auto !important;
}

.chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  margin: 7px 5px 3px 0;
  padding: 6px 20px 8px;
  border: 1px solid var(--main-color);
  max-width: 100%;
  border-radius: 25px;
  background: var(--main-color);
  background-size: 100% 19px;
  background-repeat: repeat-x;
  background-clip: padding-box;
  color: #fff;
  line-height: 13px;
  cursor: default;
}

.chosen-container-multi .chosen-choices li.search-choice span {
  word-wrap: break-word;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  position: absolute;
  top: 7px;
  left: 4px;
  display: block;
  width: 12px;
  height: 12px;
  background: url("../chosen-sprite.png") -42px 1px no-repeat;
  font-size: 1px;
  filter: brightness(100);
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-choices li.search-choice-disabled {
  padding-left: 5px;
  border: 1px solid #ccc;
  background-color: #e4e4e4;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  color: #666;
}

.chosen-container-multi .chosen-choices li.search-choice-focus {
  background: #d4d4d4;
}

.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-results {
  margin: 0;
  padding: 0;
}

.chosen-container-multi .chosen-drop .result-selected {
  display: list-item;
  color: #ccc;
  cursor: default;
  opacity: 0.65;
}

/* @end */
/* @group Active  */
.chosen-container-active .chosen-single {
  border: 1px solid #5897fb;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.chosen-container-active.chosen-with-drop .chosen-single {
  border: 1px solid #ddd;
  -moz-border-radius-bottom-right: 0;
  border-bottom-right-radius: 0;
  -moz-border-radius-bottom-left: 0;
  border-bottom-left-radius: 0;
  box-shadow: 0 1px 0 #fff inset;
}

.chosen-container-active.chosen-with-drop .chosen-single div {
  border-right: none;
  background: transparent;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
  background-position: -18px 2px;
}

.chosen-container-active .chosen-choices {
  border: 1px solid var(--main-color);
}

.chosen-container-active .chosen-choices li.search-field input[type=text] {
  color: #444 !important;
}

/* @end */
/* @group Disabled Support */
.chosen-disabled {
  opacity: 0.5 !important;
  cursor: default;
}

.chosen-disabled .chosen-single {
  cursor: default;
}

.chosen-disabled .chosen-choices .search-choice .search-choice-close {
  cursor: default;
}

/* @end */
/* @group Right to Left */
.chosen-rtl {
  text-align: left;
}

.chosen-rtl .chosen-single {
  overflow: visible;
  padding: 0 8px 0 0;
}

.chosen-rtl .chosen-single span {
  margin-left: 0;
  margin-right: 26px;
  direction: rtl;
}

.chosen-rtl .chosen-single-with-deselect span {
  margin-right: 38px;
}

.chosen-rtl .chosen-single div {
  left: auto;
  right: 3px;
}

.chosen-rtl .chosen-single abbr {
  left: auto;
  right: 26px;
}

.chosen-rtl .chosen-choices li {
  float: left;
}

.chosen-rtl .chosen-choices li.search-field input[type=text] {
  direction: rtl;
}

.chosen-rtl .chosen-choices li.search-choice {
  margin: 3px 5px 3px 0;
  padding: 3px 5px 3px 19px;
}

.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
  left: auto;
  right: 4px;
}

.chosen-rtl.chosen-container-single-nosearch .chosen-search,
.chosen-rtl .chosen-drop {
  right: 9999px;
}

.chosen-rtl.chosen-container-single .chosen-results {
  margin: 0 0 4px 4px;
  padding: 0 4px 0 0;
}

.chosen-rtl .chosen-results li.group-option {
  padding-left: 15px;
  padding-right: 0;
}

.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
  border-left: none;
}

.chosen-rtl .chosen-search input[type=text] {
  padding: 4px 5px 4px 20px;
  background: white url("../chosen-sprite.png") no-repeat -30px -20px;
  background: url("../chosen-sprite.png") no-repeat -30px -20px;
  direction: rtl;
}

.chosen-rtl.chosen-container-single .chosen-single div b {
  background-position: 6px 2px;
}

.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
  background-position: -12px 2px;
}

/* @end */
/* @group Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
  .chosen-rtl .chosen-search input[type=text],
.chosen-container-single .chosen-single abbr,
.chosen-container-single .chosen-single div b,
.chosen-container-single .chosen-search input[type=text],
.chosen-container-multi .chosen-choices .search-choice .search-choice-close,
.chosen-container .chosen-results-scroll-down span,
.chosen-container .chosen-results-scroll-up span {
    background-image: url("../chosen-sprite@2x.png") !important;
    background-size: 52px 37px !important;
    background-repeat: no-repeat !important;
  }
}
/* @end */
.chosen-container-active .chosen-choices li.search-field input[type=text]:focus {
  animation: none;
  border-color: #ddd !important;
}

.loadingCheck .chosen-container-single .chosen-single {
  visibility: hidden;
}

/*#region navbar*/
.navbar {
  padding: 0;
  margin: 0;
  border: none;
  z-index: 201;
}
.navbar.semesters-menu-active {
  z-index: 88;
}
.navbar.lti-courses-menu-active {
  z-index: 88;
}

.navbar .navbar-inner .navbar-header .navbar-account > div {
  display: inline-block;
  width: auto;
  vertical-align: top;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area {
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  list-style: none;
  margin-bottom: 0;
  display: flex;
  border: 1px solid #fff;
  border-radius: 25px;
  padding: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 20px;
}
@media screen and (max-width: 1050px) {
  .navbar .navbar-inner .navbar-header .navbar-account .account-area {
    justify-content: space-between;
    margin-left: 5px;
  }
}
@media screen and (max-width: 520px) {
  .navbar .navbar-inner .navbar-header .navbar-account .account-area {
    border: 0;
  }
}
.navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area-inner-wrapper-icon {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--main-color) !important;
  background: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  font-size: 15px !important;
  display: none !important;
}
@media screen and (max-width: 520px) {
  .navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area-inner-wrapper-icon {
    font-size: 13px !important;
    width: 15px;
    height: 15px;
    left: 0;
    top: unset;
    bottom: 0;
    transform: translateY(0);
  }
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li {
  height: 37px;
}
@media (min-width: 1050px) {
  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li {
    position: relative;
  }
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a {
  position: relative;
  min-width: 47px;
  height: 35px;
  display: inline-block;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a:hover {
  text-decoration: none;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a .icon, .navbar-account .helpBut .icon, .navbar .evidence_accreditation .icon {
  display: block;
  color: #fff;
  font-size: 20px;
  line-height: 35px;
  text-align: center;
  -webkit-transition: line-height 0.3s ease;
  -moz-transition: line-height 0.3s ease;
  -o-transition: line-height 0.3s ease;
  transition: line-height 0.3s ease;
}
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a .icon.change_school:before, .navbar-account .helpBut .icon.change_school:before, .navbar .evidence_accreditation .icon.change_school:before {
  color: #fff;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a .badge {
  position: absolute;
  top: 2px;
  left: 0;
  cursor: pointer;
  border: 0 solid var(--main-color);
  border-radius: 50%;
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px !important;
  -moz-transition: top 0.3s ease;
  -o-transition: top 0.3s ease;
  transition: top 0.3s ease;
  color: #253B83;
  font-weight: 600;
  font-size: 10px !important;
  min-width: 20px;
  font-family: "Robot", sans-serif;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.wave {
  overflow: visible;
  cursor: pointer;
  z-index: 10;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: -moz-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: -o-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: -webkit-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), -moz-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), -o-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.wave.in {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.wave.in:after {
  content: "";
  top: 3px;
  right: 5px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-image: 8121991;
  background-image: -webkit-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
  background-image: -moz-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
  background-image: -o-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
  background-image: radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%);
  border: 1px solid #fff;
  -webkit-animation: wave 5s 3s infinite linear;
  -moz-animation: wave 5s 3s infinite linear;
  -o-animation: wave 5s 3s infinite linear;
  animation: wave 5s 3s infinite linear;
  zoom: 1;
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.borderpulse {
  width: 45px;
  height: 45px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.borderpulse:after,
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.borderpulse:before {
  content: "";
  position: absolute;
  top: 1px;
  right: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  border: 1px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.borderpulse:after,
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.borderpulse:before {
  -webkit-transform: scale(0.91);
  -moz-transform: scale(0.91);
  -o-transform: scale(0.91);
  -ms-transform: scale(0.91);
  transform: scale(0.91);
  -webkit-animation: borderPulse 3.5s infinite ease;
  -moz-animation: borderPulse 3.5s infinite ease;
  -o-animation: borderPulse 3.5s infinite ease;
  animation: borderPulse 3.5s infinite ease;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.borderpulse .badge {
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.borderpulse:before {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.borderpulse i,
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.borderpulse .badge {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.blink i,
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.blink .badge {
  -webkit-transform: scale(0.91);
  -moz-transform: scale(0.91);
  -o-transform: scale(0.91);
  -ms-transform: scale(0.91);
  transform: scale(0.91);
  -webkit-animation: borderPulse 3.5s infinite ease;
  -moz-animation: borderPulse 3.5s infinite ease;
  -o-animation: borderPulse 3.5s infinite ease;
  animation: borderPulse 3.5s infinite ease;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.blink i {
  -webkit-animation-delay: 0.05s;
  -moz-animation-delay: 0.05s;
  -o-animation-delay: 0.05s;
  animation-delay: 0.05s;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu {
  padding: 0;
  min-width: 240px;
  -webkit-animation-name: dropdownSlideInDown;
  -moz-animation-name: dropdownSlideInDown;
  -o-animation-name: dropdownSlideInDown;
  animation-name: dropdownSlideInDown;
  -webkit-animation-duration: 0.3s;
  -moz-animation-duration: 0.3s;
  -o-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-border-radius: 0 !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 0 !important;
  -moz-background-clip: padding !important;
  border-radius: 0 !important;
  background-clip: padding-box !important;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li:not(.sign_out) {
  background-color: #fff;
  border: 0;
  padding: 0 8px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li:hover {
  background-color: #f5f5f5;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li a {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  padding: 10px 2px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li a .progress {
  margin-bottom: 0;
  margin-top: 4px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li a:hover {
  background-color: #f5f5f5;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li.dropdown-header,
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li.dropdown-footer {
  -webkit-text-shadow: none;
  text-shadow: none;
  font-size: 13px;
  font-weight: normal;
  text-transform: none;
  color: #262626;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li.dropdown-header {
  padding: 0 10px;
  line-height: 34px;
  margin-bottom: 10px;
  border-bottom: 1px solid #cecece;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li.dropdown-header a {
  line-height: 34px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li.dropdown-header[class*=bordered-] {
  border-bottom-width: 3px;
  border-style: solid;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li.dropdown-header i {
  margin-left: 5px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li.dropdown-footer[class*=bordered-] {
  border-top-width: 3px;
  border-style: solid;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li.dropdown-footer a {
  display: inline-block;
  color: #999;
  padding: 0;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li.dropdown-footer .btn {
  margin-top: -3px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications {
  min-width: 300px;
  padding-top: 10px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li {
  border-bottom: 1px solid #f3f3f3;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li .notification-icon {
  float: right;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li .notification-icon i {
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  margin-left: 10px;
  font-size: 15px;
  border-radius: 50%;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li .notification-body {
  float: right;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li .notification-body .title {
  display: block;
  font-size: 13px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li .notification-body .description {
  display: block;
  font-size: 10px;
  color: #999;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li .notification-extra {
  float: left;
  text-align: left;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li .notification-extra i {
  font-size: 14px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li .notification-extra .description {
  display: block;
  font-size: 10px;
  color: #999;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li.dropdown-footer {
  background-color: #11a9cc;
  border-bottom: 0;
  color: #fff;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li.dropdown-footer a {
  color: #fff;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications li.dropdown-footer .weather-icon {
  margin-top: -7px;
  margin-right: 5px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages {
  width: 300px;
  padding-top: 10px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li {
  border-bottom: 1px solid #f3f3f3;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li .message-avatar {
  max-width: 42px;
  margin-right: 6px;
  margin-left: 5px;
  vertical-align: top;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li .message {
  display: inline-block;
  position: relative;
  width: 225px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li .message span {
  display: block;
  word-wrap: break-word;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li .message-sender {
  font-size: 13px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li .message-time {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 11px;
  font-weight: 400;
  color: #0274de;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li .message-subject {
  margin-top: 5px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li .message-body {
  color: #999;
  max-height: 35px;
  width: 100%;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li {
  border-bottom: 1px solid #f5f5f5;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li:hover,
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li a:hover {
  background-color: #fff;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.username {
  display: none;
  text-align: center;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.username,
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.username a {
  color: #d0d0d0;
  font-size: 14px;
  font-weight: 300;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.email {
  text-align: center;
  font-size: 12px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.email,
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.email a {
  color: #d0d0d0;
  word-wrap: break-word;
  word-break: break-all;
  /* overflow: auto; */
  overflow: hidden;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li .avatar-area {
  position: relative;
  text-align: center;
  margin: 10px auto;
  width: 128px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li .avatar-area .avatar {
  width: 128px;
  height: 128px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li .avatar-area .caption {
  background-color: #0274de;
  zoom: 1;
  filter: alpha(opacity=70);
  -webkit-opacity: 0.7;
  -moz-opacity: 0.7;
  opacity: 0.7;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 10px;
  line-height: 9px;
  position: absolute;
  padding: 7px 0;
  text-align: center;
  width: 128px;
  cursor: pointer;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.edit {
  min-height: 35px;
}
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.edit.fontZoom {
  padding-bottom: 7px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.edit a {
  color: #999;
  display: inline-block;
  clear: none;
  font-size: 13px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.edit a:hover {
  color: var(--main-color);
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.theme-area {
  display: table;
  width: 100%;
  padding-bottom: 5px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.theme-area .colorpicker {
  padding: 10px 4px;
  width: 100%;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.theme-area .colorpicker > li {
  display: block;
  float: right;
  width: 23px;
  height: 23px;
  margin: 2px;
  padding: 0;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.theme-area .colorpicker > li > .colorpick-btn {
  display: block;
  width: 23px;
  height: 23px;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  position: relative;
  -webkit-transition: all ease 0.1s;
  -moz-transition: all ease 0.1s;
  -o-transition: all ease 0.1s;
  transition: all ease 0.1s;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.theme-area .colorpicker > li > .colorpick-btn:hover {
  text-decoration: none;
  zoom: 1;
  filter: alpha(opacity=80);
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
  -webkit-transform: scale(1.08);
  -moz-transform: scale(1.08);
  -o-transform: scale(1.08);
  -ms-transform: scale(1.08);
  transform: scale(1.08);
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.theme-area .colorpicker > li > .colorpick-btn.selected:after {
  content: "\f00c";
  display: inline-block;
  font-family: FontAwesome;
  font-size: 11px;
  color: #fff;
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
  line-height: 20px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.theme-area .btn-colorpicker {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ddd;
  vertical-align: middle;
  border-radius: 0;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.dropdown-footer {
  border-top: 3px solid var(--main-color);
  border-bottom: 0;
  text-align: center;
  padding: 0;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.dropdown-footer a {
  color: #717171;
  font-size: 13px;
  font-weight: 300;
  padding: 10px;
  display: block;
  width: 100%;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.dropdown-footer a:hover {
  color: var(--main-color);
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-arrow:before {
  content: "";
  display: inline-block;
  left: 0;
  position: absolute;
  width: 50px;
  background-color: #fff;
  border: 0;
  top: -46px;
  height: 3px;
  -webkit-box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li.open > a {
  background-color: #5fa4e4;
  -webkit-box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li.open .dropdown-menu {
  margin-top: 5px;
  left: 0;
  border: 0 !important;
  box-sizing: border-box;
  word-wrap: break-word;
  background-color: #fff;
  right: auto;
  border-radius: 8px !important;
}
@media (max-width: 1050px) {
  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li.open .dropdown-menu:not(.dropdown-login-area).open-menu-from-right {
    right: 0;
  }
  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li.open .dropdown-menu:not(.dropdown-login-area).open-menu-from-left {
    left: 0;
    right: auto;
  }
}

@media (max-width: 1050px) {
  .navbar .navbar-inner .navbar-header .navbar-account .account-area {
    position: relative;
  }
  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li.open {
    position: static;
    right: 0;
    left: auto;
  }
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area {
  opacity: 1;
  position: relative;
  cursor: pointer;
  padding: 0 !important;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media (min-width: 550px) {
  .navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area {
    margin: 0;
  }
}
.navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area .login-area-inner-wrapper {
  display: flex;
  align-items: center;
  border-radius: 25px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area section {
  width: auto;
  display: block;
  overflow: hidden;
  line-height: 25px;
  float: right;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area section h2 {
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  margin: 0;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area section h2 span {
  display: block;
  color: #fff;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-decoration: none;
  line-height: 25px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area + .dropdown-menu {
  width: 100%;
  min-width: 100px;
  padding-top: 7px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area + .dropdown-arrow:before {
  width: 100%;
}

.navbar .navbar-inner .navbar-header .navbar-account .setting {
  width: 50px;
  position: absolute;
  left: 0;
  top: 0;
}

.navbar .navbar-inner .navbar-header .navbar-account .setting a {
  position: relative;
  width: 50px;
  height: 45px;
  display: inline-block;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.navbar .navbar-inner .navbar-header .navbar-account .setting a:hover {
  text-decoration: none;
}

.navbar .navbar-inner .navbar-header .navbar-account .setting a .icon {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 45px;
  text-align: center;
}

.navbar .navbar-inner .navbar-header .navbar-account .setting-container {
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -o-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  display: inline-block;
  width: 505px;
  height: 45px;
  zoom: 1;
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  text-align: center;
  padding: 11px 0;
  position: absolute;
  top: 0;
  left: 0;
}

.navbar .navbar-inner .navbar-header .navbar-account .setting-container input[type=checkbox] {
  display: inline-block;
}

.navbar .navbar-inner .navbar-header .navbar-account .setting-container input[type=checkbox] + .text {
  color: #fff;
  margin-left: 8px;
  font-weight: 300;
}

.navbar .navbar-inner .navbar-header .navbar-account .setting-container input[type=checkbox] + .text:before {
  border-color: #0274de;
}

.navbar .navbar-inner .navbar-header .navbar-account .setting-container input[type=checkbox]:checked + .text {
  color: #fff;
}

.navbar .navbar-inner .navbar-header .navbar-account .setting-container input[type=checkbox]:checked + .text:before {
  border-color: #0274de;
  color: #fb6e52;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area,
.navbar .navbar-inner .navbar-header .navbar-account .setting-container,
.navbar .navbar-inner .navbar-header .navbar-account .setting {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.9s;
  -moz-transition: 0.9s;
  -o-transition: 0.9s;
  transition: 0.9s;
}

.navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting {
  left: 505px;
  background-color: #0274de;
}

.navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting a {
  -webkit-box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.4);
}

.navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting a:before {
  content: "";
  display: inline-block;
  left: 0;
  position: absolute;
  width: 50px;
  background-color: #fff;
  border: 0;
  top: 0;
  height: 3px;
}

.navbar .navbar-inner .navbar-header .navbar-account.setting-open .account-area {
  -webkit-transform: rotateY(-90deg);
  -moz-transform: rotateY(-90deg);
  -o-transform: rotateY(-90deg);
  -ms-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -o-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  zoom: 1;
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  left: 450px;
}

.navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting-container {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  padding: 11px;
}

.navbar .navbar-brand {
  color: #fff;
  font-size: 24px;
  -webkit-text-shadow: none;
  text-shadow: none;
  padding: 2px 0 2px 0;
  font-weight: 200;
  height: 45px;
  padding-top: 10px;
  width: auto;
}

.navbar .navbar-brand small img {
  max-width: 170px;
  max-height: 55px;
}
.navbar .navbar-brand small img.oman-logo {
  max-height: 45px;
}
@media (max-width: 550px) {
  .navbar .navbar-brand small img {
    max-width: 100px;
  }
}

.navbar .sidebar-collapse {
  text-align: center;
  padding: 0;
  position: absolute;
  right: 189px;
  top: 10px;
  z-index: 2;
  width: 35px;
  height: 45px;
}

.navbar .sidebar-collapse:hover {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.navbar .sidebar-collapse .collapse-icon {
  display: inline-block;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  padding: 11px 5px;
  line-height: 22px;
  position: relative;
  -webkit-transition: background-color 0.218s ease;
  -moz-transition: background-color 0.218s ease;
  -o-transition: background-color 0.218s ease;
  transition: background-color 0.218s ease;
  -webkit-transition: -webkit-box-shadow 0.218s ease;
  -moz-transition: -moz-box-shadow 0.218s ease;
  -o-transition: box-shadow 0.218s ease;
  transition: box-shadow 0.218s ease;
  -webkit-transition: color 0.318s ease;
  -moz-transition: color 0.318s ease;
  -o-transition: color 0.318s ease;
  transition: color 0.318s ease;
}

.navbar .sidebar-collapse.active:hover {
  box-shadow: none;
}

.navbar .sidebar-collapse.active .collapse-icon {
  font-size: 14px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  padding: 11px;
}

.navbar.navbar-fixed-top {
  z-index: 1003;
}

.navbar.navbar-fixed-top + .main-container {
  margin-top: 45px;
}

/* HEADER */
.navbar .navbar-inner .navbar-container {
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.navbar .sidebar-toggler {
  color: #FFF;
  font-size: 2em;
  text-align: center;
}
@media (min-width: 1050px) {
  .navbar .sidebar-toggler {
    width: 70px;
  }
}
@media (max-width: 1050px) {
  .navbar .sidebar-toggler {
    margin-left: 20px;
  }
}

.navbar-brand {
  /*background: $navbar_brand_bg;*/
  height: 64px !important;
  width: 200px;
}

/*.navbar .navbar-inner.loading{
  background: linear-gradient(270deg, #5b86e5, $primary);
  background-size: 400% 400%;

  -webkit-animation: loadingChat 2s ease infinite;
  -moz-animation: loadingChat 2s ease infinite;
  -o-animation: loadingChat 2s ease infinite;
  animation: loadingChat 2s ease infinite;
}*/
.navbar .navbar-inner.loading .navbar-brand {
  background: transparent;
}

@media screen and (max-width: 1338px) {
  .navbar-brand {
    background: transparent;
  }
}
/*.navbar .navbar-inner{
  background: $navbar_bg;
}*/
.navbar #messages_count .badge.bg-red {
  background: #fff !important;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area .dropdown-menu {
  min-width: 200px !important;
  overflow: hidden !important;
  overflow-y: auto !important;
}

.navbar .navbar-inner .navbar-header .dateTime {
  font-size: 1.1em;
  margin-left: 20px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  height: 100%;
  color: #fff;
}
.navbar .navbar-inner .navbar-header .dateTime .datetime-inner-wrapper {
  padding: 9px 17px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 25px;
  height: 100%;
}
.navbar .navbar-inner .navbar-header .dateTime .nav-date-wrapper {
  padding: 0 5px;
  display: flex;
  align-items: center;
  font-weight: 100;
}
.navbar .navbar-inner .navbar-header .dateTime .nav-date-wrapper i {
  margin-left: 10px;
  font-size: 16px;
  opacity: 0.8;
}

.navbar .login-area .avatar {
  border: 0 !important;
  height: 35px !important;
  width: 35px !important;
  margin: 0 auto !important;
}

.navbar .profile-photo {
  border-radius: 50%;
  height: 45px !important;
  width: 45px !important;
  top: -5px;
  position: relative;
}
@media screen and (max-width: 520px) {
  .navbar .profile-photo {
    width: 37px !important;
    height: 37px !important;
    top: 0;
  }
}

.navbar-username {
  color: #FFF;
  overflow: hidden;
  max-width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9em;
  display: inline-block;
  text-align: center;
  padding: 0 5px;
  top: 0;
  position: relative;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li.open > a {
  background: transparent;
  box-shadow: none;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li.open {
  margin: 0;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area + .dropdown-arrow:before {
  display: none;
}

.navbar #notification_count .badge {
  /*background: $danger !important;*/
  background: #fff !important;
}

@media only screen and (max-width: 767px) {
  .navbar-container {
    padding-right: 2px;
  }
}
@media only screen and (max-width: 760px) {
  .navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting {
    top: 45px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting-container {
    top: 45px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.username {
    display: block;
  }

  /*min-width: 50px;*/
  .navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area section {
    display: none;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area .avatar {
    margin-left: 0;
    margin-right: 1px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area + .dropdown-menu {
    min-width: 200px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area + .dropdown-menu:before {
    width: 50px;
  }
}
@media only screen and (max-width: 1070px) {
  .navbar .navbar-inner .navbar-header .dateTime {
    display: none;
  }
}
@media only screen and (max-width: 759px) {
  .navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting-container {
    width: 270px;
    top: 0;
    padding: 0 5px;
    text-align: right;
  }

  .navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting-container label {
    margin-bottom: 0;
  }

  .navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting {
    left: 270px;
    top: 0;
  }
}
.account-area li.open {
  margin-top: 3%;
}

@media only screen and (max-width: 1325px) {
  .navbar .navbar-inner .navbar-header .dateTime {
    display: none !important;
  }
}
@media only screen and (max-width: 820px) {
  .score-nav-section {
    padding-right: 10px !important;
  }
}
@media only screen and (max-width: 700px) {
  .navbar .sidebar-collapse {
    right: 0;
    width: 50px;
    top: 50%;
  }

  .account-area li.open {
    margin-top: 0%;
  }

  .navbar .sidebar-collapse .collpse-icon {
    padding: 11px 15px;
  }

  .navbar .navbar-inner .navbar-header .navbar-brand {
    height: auto !important;
  }
  .navbar .navbar-inner .navbar-header .score-nav-section {
    padding-top: 2px;
    padding-right: 0 !important;
  }
  .navbar .navbar-inner .navbar-header .score-nav-section #scoreBar {
    height: 33px;
  }

  /*margin-left: -42px;*/
  .navbar .navbar-inner .navbar-header .dateTime {
    display: none !important;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications {
    right: -135px;
    left: auto;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications.dropdown-arrow:before {
    right: 135px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages {
    right: auto;
    left: 0;
    top: 60px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages.dropdown-arrow:before {
    right: 135px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .setting {
    top: 45px !important;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .setting-container {
    top: 45px !important;
  }

  .navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting-container {
    right: 50px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting {
    right: 0;
  }

  .navbar-fixed-top + .main-container {
    margin-top: 90px !important;
  }

  .breadcrumbs-fixed {
    top: 90px !important;
  }

  .breadcrumbs-fixed + .page-header {
    margin-top: 40px !important;
  }

  .page-header-fixed {
    top: 130px !important;
  }

  .page-header-fixed + .page-body {
    margin-top: 80px !important;
  }

  .page-sidebar.sidebar-fixed {
    top: 90px !important;
  }

  .logo_other {
    display: none;
    text-align: center;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a {
    height: 100%;
  }

  .navbar .navbar-brand small img {
    max-height: 36px;
    margin-top: -15px;
  }

  #scoreBar #score a {
    text-decoration: underline;
  }

  .navbar li .notification {
    width: 220px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a .badge {
    width: 20px;
    font-size: 10px !important;
    height: 20px;
    padding: 5px 0px 2px 0px !important;
    top: 7px;
  }

  .teacher_day_logo {
    height: 40px !important;
  }
}
@media only screen and (max-width: 1050px) {
  .navbar {
    margin-bottom: 20px;
  }
  .navbar .navbar-header {
    padding-top: 10px;
    width: 100%;
    justify-content: space-between;
  }
  .navbar .navbar-header::before, .navbar .navbar-header::after {
    display: none;
  }
  .navbar .navbar-account {
    width: 100%;
    justify-content: space-between;
  }
  .navbar:not(.logged_in_by_admin) .login-area-wrapper {
    flex: 1;
    display: inline-flex;
    justify-content: flex-end;
  }
}
@media only screen and (max-width: 450px) {
  .navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting-container {
    width: 270px;
    padding: 0 5px;
    text-align: right;
    right: 50px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting-container label {
    margin-bottom: 0;
  }

  .navbar .navbar-inner .navbar-header .navbar-account.setting-open .setting {
    right: 0;
  }

  .navbar.logged_in_by_admin .navbar-inner .navbar-header .navbar-account .account-area > li > a {
    min-width: 40px;
  }
}
@media only screen and (max-width: 400px) {
  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications {
    right: -55px;
    left: auto;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-notifications.dropdown-arrow:before {
    right: 55px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages.dropdown-arrow:before {
    right: 105px;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-tasks {
    right: -100px;
    left: auto;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-tasks.dropdown-arrow:before {
    right: 100px;
  }
}
@media only screen and (max-width: 320px) {
  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-arrow:before {
    width: 45px !important;
  }

  .navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a {
    min-width: 45px !important;
  }
}
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li.open .dropdown-menu > li > i {
  color: var(--main-color);
  margin: 0;
  min-width: 21px;
  text-align: center;
  font-size: 16px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-login-area > li.theme-area .colorpicker > li {
  display: inline;
  float: none;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li.show-all {
  border-bottom: 1px solid #f3f3f3;
  background-color: #fff;
  text-align: center;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li.show-all > a {
  width: 49%;
  margin: 0px;
  display: inline-block;
  background-color: #fff;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li.show-all > a:hover {
  background-color: #fff;
  margin: 0px;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu.dropdown-messages li.no_msg_result {
  border-bottom: 1px solid transparent;
}

.dark_theme_box {
  padding: 10px 5px 5px !important;
  cursor: pointer;
  width: 100%;
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.dark_theme_box * {
  pointer-events: none;
}
.dark_theme_box label {
  margin-bottom: 0;
  padding-top: 3px;
  color: #999;
  font-size: 13px;
  display: inline-block;
  vertical-align: top;
}
.dark_theme_box #dark_theme_input {
  opacity: 0;
  width: 0;
  padding: 0;
  margin: 0;
  display: inline;
}

.login_as_box {
  padding: 10px 5px 5px !important;
  cursor: pointer;
  width: 100%;
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.login_as_box * {
  pointer-events: none;
}
.login_as_box label {
  margin-bottom: 0;
  padding-top: 3px;
  color: #999;
  font-size: 13px;
  display: inline-block;
  vertical-align: top;
}
.login_as_box #login_as_input {
  opacity: 0;
  width: 0;
  padding: 0;
  margin: 0;
  display: inline;
}

.score-nav-section {
  width: auto;
}
@media only screen and (max-width: 700px) {
  .score-nav-section {
    padding-right: 0 !important;
  }
}
@media only screen and (max-width: 380px) {
  .score-nav-section {
    display: none;
  }
}
.score-nav-section #label {
  display: none;
}
.score-nav-section #score img {
  display: none;
}
.score-nav-section #scoreBar {
  padding: 0 17px;
  padding-right: 60px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 25px;
  height: 37px;
  position: relative;
}
.score-nav-section #scoreBar:before {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: url(/img/control-panel.svg) no-repeat;
  background-size: contain;
  width: 25px;
  height: 26px;
}

@media screen and (max-width: 1050px) {
  .navbar .linkButton_nav_wrapper, .navbar .switch-version-container {
    display: none;
  }
}
@media screen and (max-width: 700px) {
  .navbar .redirect_to_new_version .linkButton {
    box-shadow: unset;
  }
}
.navbar .bordered-profile-picture {
  border: 1px solid #fff;
}
.navbar #walkthrough_button_div {
  left: 10px;
}
@media screen and (max-width: 767px) {
  .navbar .helpBut_nav_wrapper {
    display: none;
  }
  .navbar #walkthrough_button_div {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}
.navbar .linkButton {
  padding: 4px 12px;
  background: #fff;
  text-decoration: none;
  height: 37px;
  box-shadow: 0 0 0px 7px rgba(255, 255, 255, 0.15);
  font-size: 13px;
  text-align: center;
  transition: ease-in-out 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  border-radius: 25px;
  cursor: pointer;
}
.navbar .linkButton a {
  color: #fff;
  text-transform: uppercase;
}

.navbar .chatbar-contacts {
  border: 0;
}

.navbar .admin_back_login {
  height: 100%;
  display: flex !important;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  min-width: 155px;
  margin-left: 15px;
}
.navbar .admin_back_login i {
  margin-right: 10px;
  font-size: 20px;
  color: #fff;
}
@media (max-width: 750px) {
  .navbar .admin_back_login {
    margin-left: 5px;
  }
}
@media (max-width: 750px) {
  .navbar .admin_back_login {
    margin-right: 5px;
  }
}
@media (max-width: 430px) {
  .navbar .admin_back_login {
    width: 100% !important;
    margin-top: 7px;
  }
}
@media (max-width: 400px) {
  .navbar .admin_back_login {
    padding-right: 0;
  }
  .navbar .admin_back_login i {
    margin-right: 0;
  }
}
.navbar .admin_back_login .back_to_admin_button {
  color: #fff;
  font-size: 0.9em;
}
@media (max-width: 375px) {
  .navbar .admin_back_login .back_to_admin_button {
    font-size: 0.7em;
  }
}

.partners-portal-navbar h5 {
  margin: 0;
}
.partners-portal-navbar .partners-portal-title {
  padding: 2px;
}
@media (max-width: 400px) {
  .partners-portal-navbar h5 {
    padding-right: 15px;
  }
}

.navbar .search-menu-wrapper {
  height: 38px;
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #fff;
  padding: 5px 17px;
  border-radius: 25px;
  color: #fff;
  background: #FFFFFF1A 0% 0% no-repeat padding-box;
  min-width: min(290px, 17vw);
}
.navbar .search-menu-wrapper:not(.search-menu-wrapper-mobile) {
  margin-right: 15px;
}
.navbar .search-menu-wrapper.search-menu-wrapper-mobile {
  display: none !important;
  margin-left: 15px;
}
.navbar .search-menu-wrapper i {
  font-size: 2em;
}
.navbar .search-menu-wrapper p {
  margin-bottom: 0;
  font-weight: 300;
  font-size: 1em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: calc(100% - 30px);
  margin-right: 10px;
}
@media screen and (max-width: 750px) {
  .navbar .search-menu-wrapper {
    min-width: unset;
    padding: 5px;
  }
  .navbar .search-menu-wrapper:not(.search-menu-wrapper-mobile) {
    display: none !important;
  }
  .navbar .search-menu-wrapper.search-menu-wrapper-mobile {
    display: flex !important;
  }
}

.navbar .messages_notification .show-details {
  display: none;
}

.navbar-header.pull-right {
  float: unset;
}

.navbar .show-details {
  display: none;
}

.navbar .navbar-inner .navbar-header .change_school_toggle {
  text-decoration: unset;
}
.navbar .navbar-inner .navbar-header .change_school_toggle.dropdown-toggle {
  margin-left: 15px;
  border-radius: 4px;
  border: 1px solid #fff;
  padding-left: 10px;
}
@media screen and (max-width: 1050px) {
  .navbar .navbar-inner .navbar-header .change_school_toggle.dropdown-toggle {
    margin-left: 0;
    margin-right: 10px;
  }
}
.navbar .navbar-inner .navbar-header .change_school_toggle.toggle-school-mobile {
  display: none;
}
.navbar .navbar-inner .navbar-header .change_school_toggle .arrow-icon {
  color: var(--main-color) !important;
  background: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  font-size: 15px !important;
  font-weight: bold;
}
.navbar .navbar-inner .navbar-header .change_school_toggle .icon-school-flag {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  margin-left: 7px;
}
.navbar .navbar-inner .navbar-header .change_school_toggle .icon-school-flag:before {
  color: #fff;
}
.navbar .navbar-inner .navbar-header .change_school_toggle img {
  max-height: 42px;
  max-width: 170px;
  object-fit: contain;
  margin-left: 7px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.8);
  padding: 3px 5px;
}
@media screen and (max-width: 1210px) {
  .navbar .navbar-inner .navbar-header .change_school_toggle p {
    max-width: 100px;
    font-size: 13px;
  }
  .navbar .navbar-inner .navbar-header .change_school_toggle img {
    max-height: 36px;
  }
}
@media screen and (max-width: 750px) {
  .navbar .navbar-inner .navbar-header .change_school_toggle.toggle-school-web {
    display: none;
  }
  .navbar .navbar-inner .navbar-header .change_school_toggle.toggle-school-mobile {
    display: flex;
  }
}
@media screen and (max-width: 460px) {
  .navbar .navbar-inner .navbar-header .change_school_toggle {
    margin-left: 0;
    position: relative;
  }
  .navbar .navbar-inner .navbar-header .change_school_toggle img {
    max-width: 100px;
    margin-left: 5px;
  }
  .navbar .navbar-inner .navbar-header .change_school_toggle p {
    display: none;
  }
  .navbar .navbar-inner .navbar-header .change_school_toggle .icon-school-flag {
    margin-left: 0;
  }
}

@media screen and (max-width: 650px) {
  .logged_in_by_admin.navbar .navbar-inner .navbar-header .navbar-account .change_school_toggle p {
    display: none;
  }
}
/*#region Sidebar*/
.page-sidebar {
  position: absolute;
  top: 0 !important;
  display: block;
  height: 100%;
  padding: 10px;
  background-color: #fff !important;
  z-index: 150;
  width: 250px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
}
@media screen and (min-width: 880px) {
  .page-sidebar {
    top: 10px !important;
  }
}
.page-sidebar .header_middle {
  min-height: 31px;
}
.page-sidebar .header_middle .btn-group {
  display: block;
  height: 40px;
}

.page-sidebar.sidebar-fixed {
  position: fixed;
  top: 45px;
  float: none !important;
  z-index: 1000;
}

.page-sidebar.sidebar-fixed:before {
  height: 5000px;
  top: 45px;
  bottom: auto;
}

.page-sidebar.hide {
  display: none !important;
}

.page-sidebar.hide:before {
  display: none;
}

.page-sidebar.hide ~ .page-content {
  margin-right: 0 !important;
}

.page-sidebar.hide ~ .page-content .breadcrumbs-fixed {
  right: 0 !important;
}

.page-sidebar.hide ~ .page-content .page-header-fixed {
  right: 0 !important;
}

.page-sidebar .sidebar-header-wrapper {
  margin-right: 5px;
  height: 40px;
  margin-bottom: 0;
  position: relative;
}

.page-sidebar .sidebar-header-wrapper .searchinput {
  height: 41px;
  z-index: 2;
  background-color: #fff;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid #fff;
  padding-right: 40px;
  width: 100%;
}

.page-sidebar .sidebar-header-wrapper .searchinput:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #fff;
}

.page-sidebar .sidebar-header-wrapper .searchinput:focus ~ .searchhelper {
  display: block;
  z-index: 124;
}

.page-sidebar .sidebar-header-wrapper .searchinput::-webkit-input-placeholder {
  color: #d0d0d0;
  font-weight: 300;
  font-family: "Open Sans", "Segoe UI";
}

.page-sidebar .sidebar-header-wrapper .searchinput::-moz-placeholder {
  /* Firefox 19+ */
  color: #d0d0d0;
  font-weight: 300;
  font-family: "Open Sans", "Segoe UI";
}

.page-sidebar .sidebar-header-wrapper .searchinput:-moz-placeholder {
  /* Firefox 19+ */
  color: #d0d0d0;
  font-weight: 300;
  font-family: "Open Sans", "Segoe UI";
}

.page-sidebar .sidebar-header-wrapper .searchinput:-ms-input-placeholder {
  color: #d0d0d0;
  font-weight: 300;
  font-family: "Open Sans", "Segoe UI";
}

.page-sidebar .sidebar-header-wrapper .searchicon {
  cursor: pointer;
  display: inline-block;
  height: 12px;
  right: 20px;
  position: absolute;
  top: 14px;
  width: 12px;
  color: #0274de;
  z-index: 124;
}

.page-sidebar .sidebar-header-wrapper .searchhelper {
  -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  background-color: #fff;
  color: #999;
  display: none;
  opacity: 1;
  padding: 10px;
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  z-index: 4;
}

.page-sidebar .sidebar-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-right: 5px;
  background: #fff;
  margin-right: 2px !important;
}

.page-sidebar .sidebar-menu a {
  display: block;
  height: 45px;
  line-height: 45px;
  margin: 2px 0;
  padding: 0 5px;
  padding-left: 15px;
  -webkit-text-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none;
  z-index: 123;
  font-size: 13px;
  /*color: $sidemenu_link;*/
  color: var(--dark-blue-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 7px;
  font-weight: 400;
}

.page-sidebar .sidebar-menu a:hover {
  /*color: $sidemenu_link;*/
  color: var(--dark-blue-color);
}

.page-sidebar .sidebar-menu a:hover:before {
  display: block;
}

.page-sidebar .sidebar-menu a .menu-icon {
  display: inline-block;
  vertical-align: middle;
  min-width: 27px;
  text-align: center;
  font-size: 19px;
  font-weight: normal;
  font-style: normal;
  margin-top: -3px;
  margin-left: 6px;
  color: var(--main-color);
}
.page-sidebar .sidebar-menu a .menu-icon.menu-icon-svg {
  fill: var(--main-color);
  width: 25px;
  height: auto;
  max-height: 21px;
  min-width: 23px;
}

.page-sidebar .sidebar-menu a .menu-expand {
  display: inline-block;
  position: absolute;
  font-size: 13px;
  line-height: 10px;
  height: 10px;
  width: 10px;
  left: 12px;
  top: 15px;
  margin: 0;
  text-align: center;
  padding: 0;
  -webkit-text-shadow: none;
  text-shadow: none;
  color: #666;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
}

.page-sidebar .sidebar-menu a .menu-expand:before {
  content: "\f105";
}

.page-sidebar .sidebar-menu li {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
}

.page-sidebar .sidebar-menu li:before {
  /*  display: none;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2px;
    max-width: 4px;
    overflow: hidden;
    background-color: $primary;
    width: 2px;*/
}

.page-sidebar .sidebar-menu li.open {
  background-color: #fff;
}

.page-sidebar .sidebar-menu li.open > a {
  color: #262626;
}

.page-sidebar .sidebar-menu li.open > a .menu-expand {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.page-sidebar .sidebar-menu li.open > .submenu {
  display: block !important;
}

.page-sidebar .sidebar-menu li.active:not(.open):before {
  display: block;
}

.page-sidebar .sidebar-menu li.active > a {
  display: block;
  content: "";
  border-color: #cecece;
  /*background-color: $bg_e;*/
  background: rgba(var(--main-color-rgb), 0.1);
}

.page-sidebar .sidebar-menu li > a:hover, .page-sidebar .sidebar-menu li > a:focus {
  background: rgba(var(--main-color-rgb), 0.1);
}

.page-sidebar .sidebar-menu li.active.parent-menu > a {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.page-sidebar .sub-menu li {
  position: relative;
}

.page-sidebar .sub-menu li a:after {
  content: "";
  display: block;
  height: 100%;
  width: 1px;
  background-color: #d2cfcf;
  position: absolute;
  top: 0;
  right: 25px;
}

.page-sidebar .sub-menu li a:before {
  content: "";
  display: block;
  height: 5px;
  width: 5px;
  background-color: #d2cfcf;
  position: absolute;
  top: 25px;
  right: 23px;
  z-index: 2;
}

.page-sidebar .sub-menu li.active:before {
  display: none !important;
}

.page-sidebar .sub-menu li.active a {
  background-color: transparent;
  box-shadow: none;
}

.page-sidebar .sub-menu li.active a:before {
  background-color: var(--main-color);
}

.page-sidebar .sidebar-menu li:not(.open):hover:before {
  display: block;
  background-color: var(--main-color);
}

.page-sidebar .sidebar-menu > li > a:hover, .page-sidebar .sidebar-menu li a:focus {
  /*background-color: rgba($primary , .3) !important;*/
}

.page-sidebar .sidebar-menu > li:last-child > a {
  border-bottom: 1px solid #f3f3f3;
}

.page-sidebar .sidebar-menu li .menu-icon {
  color: var(--main-color);
}

.page-sidebar .sidebar-menu > li > .submenu {
  background-color: #fbfbfb;
  -webkit-box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15), inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15), inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15), inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
}

.page-sidebar .sidebar-menu > li > .submenu:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  right: 23px;
  top: 0;
  bottom: 19px;
  border-right: 1px solid #e2e2e2;
}

.page-sidebar .sidebar-menu .sub-menu li:before {
  right: 0;
}

.page-sidebar .sidebar-menu > li > .submenu > li > a:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 5px;
  height: 5px;
  right: 21px;
  top: 17px;
  background-color: #fff;
  border: 1px solid #e2e2e2;
  z-index: 2;
}

.page-sidebar .sidebar-menu > li > .submenu > li.active > a:before {
  background-color: #e2e2e2;
}

.page-sidebar .sidebar-menu > li > .submenu > li.active:first-child > a {
  -webkit-box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15);
}

.page-sidebar .sidebar-menu > li > .submenu > li.active:last-child a {
  -webkit-box-shadow: inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
}

.page-sidebar .sidebar-menu > li.open > a {
  background-color: #fff;
}

.page-sidebar .sidebar-menu .submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #fbfbfb;
  border-top: 0;
  z-index: 123;
}

.page-sidebar .sidebar-menu .submenu li {
  margin-right: 0;
  position: relative;
}

.page-sidebar .sidebar-menu .submenu li.open:before {
  display: none;
}

.page-sidebar .sidebar-menu .submenu li.active > a {
  color: #262626;
  background-color: #f5f5f5;
}

.page-sidebar .sidebar-menu .submenu li.active > .submenu {
  display: block;
}

.page-sidebar .sidebar-menu .submenu > li > a {
  padding-right: 40px;
}

.page-sidebar .sidebar-menu .submenu > li.open > a {
  background-color: #fbfbfb;
}

.page-sidebar .sidebar-menu .submenu > li .submenu {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.page-sidebar .sidebar-menu .submenu > li .submenu > li > a {
  padding-right: 50px;
}

.page-sidebar .sidebar-menu .submenu > li .submenu > li .submenu > li > a {
  padding-right: 70px;
}

.page-sidebar.menu-compact {
  width: 47px;
}

.page-sidebar.menu-compact ~ .page-content {
  margin-right: 43px;
}

.page-sidebar.menu-compact ~ .page-content .breadcrumbs-fixed {
  right: 47px;
}

.page-sidebar.menu-compact ~ .page-content .page-header-fixed {
  right: 47px;
}

.page-sidebar.menu-compact:before {
  width: 47px;
}

.page-sidebar.menu-compact .sidebar-header-wrapper {
  width: 42px;
}

.page-sidebar.menu-compact .sidebar-header-wrapper:hover {
  width: 238px;
}

.page-sidebar.menu-compact .sidebar-header-wrapper:hover .searchinput {
  -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.page-sidebar.menu-compact .sidebar-header-wrapper .searchinput:focus {
  width: 238px;
  -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.page-sidebar.menu-compact .sidebar-header-wrapper .searchinput:focus ~ .searchhelper {
  width: 238px;
}

.page-sidebar.menu-compact .sidebar-header-wrapper .searchicon {
  right: 15px;
}

.page-sidebar.menu-compact .sidebar-menu {
  width: 42px;
}

.page-sidebar.menu-compact .sidebar-menu > li.open > .menu-text {
  display: none !important;
}

.page-sidebar.menu-compact .sidebar-menu > li.open > .submenu {
  display: none !important;
}

.page-sidebar.menu-compact .sidebar-menu > li:hover > a {
  color: #262626;
}

.page-sidebar.menu-compact .sidebar-menu > li:hover > a > .menu-text {
  display: block;
}

.page-sidebar.menu-compact .sidebar-menu > li:hover > .submenu {
  display: block !important;
}

.page-sidebar.menu-compact .sidebar-menu > li > a {
  position: relative;
  z-index: 123;
}

.page-sidebar.menu-compact .logo_other, .page-sidebar.menu-compact .header_middle {
  display: none !important;
}

#switch_school_checkbox, #switch_school_label {
  display: none;
}

.page-sidebar.menu-compact #switch_school_label {
  display: block;
  height: 38px;
  line-height: 36px;
  padding: 0 16px 0 20px;
  font-size: 13px;
  text-decoration: none;
  color: #737373;
  text-align: center;
}

.page-sidebar.menu-compact #switch_school_checkbox:checked ~ .header_middle {
  display: block !important;
  position: absolute;
  background: #fff;
  z-index: 1000;
  padding: 10px;
  top: 70px;
  right: 30px;
  -webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px -5px 5px -5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px -5px 5px -5px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px -5px 5px -5px rgba(0, 0, 0, 0.3);
}

.page-sidebar.menu-compact .sidebar-menu > li > a .menu-text {
  display: none;
  position: absolute;
  right: 42px;
  top: 0;
  width: 195px;
  height: 53px;
  line-height: 38px;
  background-color: #fff;
  z-index: 121;
  padding-right: 25px;
  -webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px -5px 5px -5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px -5px 5px -5px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px -5px 5px -5px rgba(0, 0, 0, 0.3);
}

.page-sidebar.menu-compact .sidebar-menu > li > a .menu-expand {
  display: none;
}

.page-sidebar.menu-compact .sidebar-menu > li > a.menu-dropdown {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.page-sidebar.menu-compact .sidebar-menu > li > a.menu-dropdown > .menu-text {
  border: 0;
  top: 0;
  right: 42px;
  width: 195px;
  border-bottom: 1px solid #f3f3f3;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.page-sidebar.menu-compact .sidebar-menu > li > a:hover {
  background-color: #fff;
}

.page-sidebar.menu-compact .sidebar-menu > li > .submenu {
  background: #fbfbfb;
  position: absolute;
  z-index: 120;
  right: 42px;
  top: 0;
  width: 195px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  padding-top: 38px;
  display: none;
  border-right: 1px solid #f3f3f3;
  -webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px -5px 5px -5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px -5px 5px -5px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px 5px 5px -5px rgba(0, 0, 0, 0.3), 5px -5px 5px -5px rgba(0, 0, 0, 0.3);
}

.page-sidebar.menu-compact .sidebar-menu > li > .submenu li > a {
  margin-right: 0;
  padding-right: 24px;
}

.page-sidebar.menu-compact .sidebar-menu > li > .submenu li.open > .submenu {
  display: block;
  right: 0;
  position: relative;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.page-sidebar.menu-compact .sidebar-menu > li > .submenu li .submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.page-sidebar.menu-compact .sidebar-menu > li > .submenu li:hover {
  background-color: #fff;
}

.page-sidebar.menu-compact .sidebar-menu > li > .submenu li:hover:before {
  display: block;
  right: 0;
}

.page-sidebar.menu-compact .sidebar-menu > li > .submenu li.active:not(.open):before {
  right: 0;
}

.page-sidebar.menu-compact .sidebar-menu > li > .submenu:before {
  display: none;
}

.page-sidebar.menu-compact .sidebar-menu > li > .submenu > li > a {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

.page-sidebar.menu-compact .sidebar-menu > li > .submenu > li > a:before {
  display: none;
}

.school_name h4 {
  font-weight: 500 !important;
  color: #777;
  background: #fff;
  font-size: 18px !important;
  margin-bottom: 18px;
}

/* Sub Menu */
.parent-menu:after {
  content: "\f105";
  display: inline-block;
  font-family: FontAwesome;
  position: absolute;
  top: 11px;
  left: 6px;
  font-size: 1.3em;
  color: #9E9E9E;
  z-index: 200;
}

.parent-menu:hover:after, .parent-menu.active:after {
  content: "\f107";
}

.parent-menu:hover > a {
  /*border-color: #cecece;*/
  background-color: rgba(var(--main-color), 0.1);
}

.parent-menu .sub-menu {
  background: rgba(var(--main-color-rgb), 0.1);
  max-height: 0;
  height: 100%;
  opacity: 0;
  transition: all ease-in-out 0.3s;
  overflow: auto;
  margin-right: -2px;
  border-left: 1px solid #eaeaea;
}

.parent-menu.active .sub-menu {
  max-height: 600px;
  height: max-content;
  opacity: 1;
}

.parent-menu:before {
  height: 53px;
}

.sub-menu li a {
  padding-right: 40px !important;
  cursor: pointer;
}

/* End sup menu */
.page-sidebar .sidebar-header-wrapper .searchinput {
  margin: 0 !important;
}

.page-sidebar .sidebar-header-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: 100px !important;
  margin-bottom: 0 !important;
  padding: 10px 10px !important;
  position: relative;
}

.page-sidebar.menu-compact .sidebar-header-wrapper {
  width: 47px !important;
}

.logo_other {
  text-align: center;
}

.logo_other img {
  max-width: 200px !important;
  max-height: 89px !important;
}

.logo_other img.banner {
  max-width: 100% !important;
  max-height: 100% !important;
}

/*************************/
/***************Responsive************/
/*************************/
@media only screen and (max-width: 880px) {
  .page-sidebar:before {
    display: none;
  }

  .breadcrumbs-fixed {
    right: 0 !important;
  }

  .page-header-fixed {
    right: 0 !important;
  }

  .page-sidebar {
    height: auto;
  }

  .page-sidebar:before {
    display: block !important;
  }

  .page-sidebar.menu-compact ~ .page-content {
    margin-right: 0;
  }

  .page-sidebar.menu-compact ~ .page-content .breadcrumbs-fixed {
    right: 0;
  }

  .page-sidebar.menu-compact ~ .page-content .page-header-fixed {
    right: 0;
  }

  .page-sidebar.menu-compact.hide ~ .page-content {
    margin-right: 46px !important;
  }

  .page-sidebar.menu-compact.hide ~ .page-content .breadcrumbs-fixed {
    right: 46px !important;
  }

  .page-sidebar.menu-compact.hide ~ .page-content .page-header-fixed {
    right: 46px !important;
  }
}
@media (max-width: 500px) {
  .page-sidebar.hide ~ .page-content .page-header .header-title {
    display: none;
  }

  .page-sidebar.hide ~ .page-content .page-header .header-buttons .refresh,
.page-sidebar.hide ~ .page-content .page-header .header-buttons .fullscreen {
    display: none;
  }

  .page-sidebar.menu-compact.hide ~ .page-content .page-header .header-buttons .refresh,
.page-sidebar.menu-compact.hide ~ .page-content .page-header .header-buttons .fullscreen {
    display: inline-block;
  }

  .page-sidebar .sidebar-header-wrapper {
    display: none;
    text-align: center;
  }
}
.selected_list_icon {
  position: absolute;
  left: 9px;
  top: 5px;
  color: #a0d468;
}

.semesters-menu a, .roles-menu a, .lti-courses-menu a {
  word-break: break-all;
}

.page-sidebar.loadingCheck:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0);
  z-index: 1111;
}

.page-sidebar.loadingCheck li a > span {
  position: relative;
}

.page-sidebar.loadingCheck .header_middle {
  visibility: hidden;
}

.page-sidebar.loadingCheck .sidebar-menu li .menu-icon:before,
.page-sidebar.loadingCheck li a > span:before,
.page-sidebar.loadingCheck li .menu-icon-svg {
  content: "";
  width: 100%;
  height: 100%;
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  background: #ccc;
  background: -webkit-gradient(linear, left top, right top, color-stop(8%, #f7f7f7), color-stop(18%, #999), color-stop(33%, #f7f7f7));
  background: linear-gradient(90deg, #f7f7f7 8%, #999 18%, #f7f7f7 33%);
  background-size: 900px 4px;
  position: absolute;
  left: 0;
  top: 0;
}

.page-sidebar.loadingCheck li a .menu-icon.menu-icon-svg {
  max-width: unset;
  max-height: unset;
  width: 40px;
  position: relative;
  height: 40px;
  fill: transparent;
}

.page-sidebar.loadingCheck .sidebar-menu li .menu-icon:before {
  border-radius: 50%;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.wideTableContainer .export_icons .btn-success {
  border-radius: 5px;
}

.page-sidebar .chosen-with-drop.chosen-container-single .chosen-single {
  color: #fff;
}

.loadingCheck .parent-menu.active .sub-menu {
  max-height: 0;
}

.loadingCheck .page-sidebar,
.page-sidebar.loadingCheck .sidebar-menu > li > a:hover {
  background: #fff;
}

.loadingCheck .chosen-container-single .chosen-single,
.loadingCheck .parent-menu:after {
  border-color: #fafafa;
  color: #fafafa;
}

.page-sidebar.loadingCheck .sidebar-menu li .menu-icon {
  height: 40px;
  padding-top: 10px;
  width: 40px;
  border-radius: 50%;
  position: relative;
}
.page-sidebar.loadingCheck .sidebar-menu li .menu-icon:not(.menu-icon-svg) {
  background: #fff;
}

.page-sidebar.loadingCheck .sidebar-menu li img.menu-icon {
  opacity: 0;
}

.semesters-menu, .lti-courses-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  min-height: 150px;
  max-height: 80vh;
  width: max(300px, 50%);
  overflow-y: auto;
  padding: 15px;
}
.semesters-menu .semester-menu-label, .semesters-menu .lti-courses-menu-label, .lti-courses-menu .semester-menu-label, .lti-courses-menu .lti-courses-menu-label {
  margin: 10px 0 15px;
  font-weight: 500 !important;
}
.semesters-menu .semester-menu-label i, .semesters-menu .lti-courses-menu-label i, .lti-courses-menu .semester-menu-label i, .lti-courses-menu .lti-courses-menu-label i {
  color: var(--main-color);
  margin-left: 10px;
}
.semesters-menu .year_elm, .lti-courses-menu .year_elm {
  background: #fafafa;
  padding: 10px 15px;
  border-radius: 5px;
  margin-bottom: 7px;
}
.semesters-menu .year-title, .lti-courses-menu .year-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 5px 0;
  font-size: 16px !important;
  font-weight: 400 !important;
  cursor: pointer;
}
.semesters-menu .year-title .arrow, .lti-courses-menu .year-title .arrow {
  font-size: 18px;
  color: var(--main-color);
}
.semesters-menu .year-title .fa-caret-down, .lti-courses-menu .year-title .fa-caret-down {
  display: none;
}
.semesters-menu .year-title.collapsed .fa-caret-up, .lti-courses-menu .year-title.collapsed .fa-caret-up {
  display: none;
}
.semesters-menu .year-title.collapsed .fa-caret-down, .lti-courses-menu .year-title.collapsed .fa-caret-down {
  display: block;
}
.semesters-menu .semesters_list_, .lti-courses-menu .semesters_list_ {
  position: relative;
}
.semesters-menu .semesters_list_:before, .lti-courses-menu .semesters_list_:before {
  right: 0;
  top: 0;
  position: absolute;
  width: 1px;
  height: 100%;
  content: "";
  background: #ddd;
}
.semesters-menu .semesters_list_ li, .lti-courses-menu .semesters_list_ li {
  list-style: none;
  position: relative;
}
.semesters-menu .semesters_list_ li .selected_semester, .lti-courses-menu .semesters_list_ li .selected_semester {
  color: #444;
  font-style: normal;
}
.semesters-menu .semesters_list_ li a, .lti-courses-menu .semesters_list_ li a {
  color: var(--main-color);
  padding: 4px;
  padding-right: 23px;
  position: relative;
  display: inline-block;
}
.semesters-menu .semesters_list_ li a:before, .lti-courses-menu .semesters_list_ li a:before {
  right: -1.5px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--main-color);
  content: "";
}
.semesters-menu .semester_loader, .semesters-menu .lti_courses_loader, .lti-courses-menu .semester_loader, .lti-courses-menu .lti_courses_loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  transform: translate(-50%, -50%);
}

#semester_menu_mask, #lti_courses_menu_mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
}

.page-container.minimize-sidebar .page-sidebar {
  width: 70px;
  height: auto;
  z-index: 200;
}
@media screen and (max-width: 880px) {
  .page-container.minimize-sidebar .page-sidebar {
    display: none;
    float: none;
  }
}
.page-container.minimize-sidebar .page-sidebar .sidebar-header-wrapper,
.page-container.minimize-sidebar .page-sidebar .school_name,
.page-container.minimize-sidebar .page-sidebar .header_middle,
.page-container.minimize-sidebar .page-sidebar .app-links,
.page-container.minimize-sidebar .page-sidebar .social-links,
.page-container.minimize-sidebar .page-sidebar .sidebar-menu li a span,
.page-container.minimize-sidebar .page-sidebar .parent-menu:after {
  display: none;
}
.page-container.minimize-sidebar .page-sidebar .sidebar-menu > li:last-child > a {
  border-bottom: 0;
}
.page-container.minimize-sidebar .page-sidebar .sub-menu {
  display: none !important;
}
.page-container.minimize-sidebar .page-sidebar .sidebar-menu li {
  text-align: center;
  display: none;
}
.page-container.minimize-sidebar .page-sidebar .sidebar-menu li > a {
  padding: 0;
  margin: 15px 0;
}
.page-container.minimize-sidebar .page-sidebar .sidebar-menu li > a .menu-icon {
  margin: 0;
}
.page-container.minimize-sidebar .page-sidebar .sidebar-menu > li:not(.parent-menu):not(.hidden-for-minimize) {
  display: block;
}
.page-container.minimize-sidebar .page-sidebar .NationalDayStopAnthem button {
  width: auto;
}
.page-container.minimize-sidebar .page-sidebar .NationalDayStopAnthem button i {
  margin-left: 0px;
}
.page-container.minimize-sidebar .page-sidebar .NationalDayStopAnthem button span {
  display: none;
}
.page-container.minimize-sidebar .page-sidebar .powered_by_classera {
  display: none;
}

.page-container:not(.minimize-sidebar) .page-sidebar .tooltip {
  display: none !important;
}

.tab-sidebar-list-text-gray {
  color: #aeaeae !important;
}

.tab-sidebar-list-text-gray:hover .tooltip-cos11 {
  /* display: block; */
  z-index: 10000 !important;
  position: absolute;
  bottom: 40px;
  width: auto;
  background-color: #fff;
  color: #444;
  border: solid 1px rgba(68, 68, 68, 0.9);
  text-align: center !important;
  align-items: center;
  height: 35px;
  justify-content: center;
  bottom: 40px;
  padding: 3px;
  padding-left: 10px;
  display: flex;
  border-left: transparent;
  border-top: transparent;
}
.tab-sidebar-list-text-gray:hover .tooltip-cos11-arrow {
  position: relative;
  left: 140px;
  top: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #444;
  font-size: 0;
  line-height: 0;
  float: left;
}

@keyframes plyr-progress {
  to {
    background-position: 25px 0;
  }
}
@keyframes plyr-popup {
  0% {
    opacity: 0.5;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes plyr-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.plyr {
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: subpixel-antialiased;
  direction: ltr;
  font-family: Avenir, "Avenir Next", "Roboto", "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1.7;
  max-width: 100%;
  min-width: 200px;
  position: relative;
  text-shadow: none;
  transition: box-shadow 0.3s ease;
}

.plyr audio, .plyr video {
  border-radius: inherit;
  height: auto;
  vertical-align: middle;
  width: 100%;
}

.plyr button {
  font: inherit;
  line-height: inherit;
  width: auto;
}

.plyr:focus {
  outline: 0;
}

.plyr--full-ui {
  box-sizing: border-box;
}

.plyr--full-ui *, .plyr--full-ui ::after, .plyr--full-ui ::before {
  box-sizing: inherit;
}

.plyr--full-ui a, .plyr--full-ui button, .plyr--full-ui input, .plyr--full-ui label {
  touch-action: manipulation;
}

.plyr__badge {
  background: #4f5b5f;
  border-radius: 2px;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  padding: 3px 4px;
}

.plyr--full-ui ::-webkit-media-text-track-container {
  display: none;
}

.plyr__captions {
  animation: plyr-fade-in 0.3s ease;
  bottom: 0;
  color: #fff;
  display: none;
  font-size: 14px;
  left: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  transition: transform 0.4s ease-in-out;
  width: 100%;
}

.plyr__captions .plyr__caption {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 185%;
  padding: 0.2em 0.5em;
  white-space: pre-wrap;
}

.plyr__captions .plyr__caption div {
  display: inline;
}

.plyr__captions span:empty {
  display: none;
}

@media (min-width: 480px) {
  .plyr__captions {
    font-size: 16px;
    padding: 20px;
  }
}
@media (min-width: 768px) {
  .plyr__captions {
    font-size: 18px;
  }
}
.plyr--captions-active .plyr__captions {
  display: block;
}

.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
  transform: translateY(-40px);
}

.plyr__control {
  background: 0 0;
  border: 0;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  padding: 7px;
  position: relative;
  transition: all 0.3s ease;
}

.plyr__control svg {
  display: block;
  fill: currentColor;
  height: 18px;
  pointer-events: none;
  width: 18px;
}

.plyr__control:focus {
  outline: 0;
}

.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px rgba(26, 175, 255, 0.5);
  outline: 0;
}

a.plyr__control {
  text-decoration: none;
}

a.plyr__control::after, a.plyr__control::before {
  display: none;
}

.plyr__control.plyr__control--pressed .icon--not-pressed, .plyr__control.plyr__control--pressed .label--not-pressed, .plyr__control:not(.plyr__control--pressed) .icon--pressed, .plyr__control:not(.plyr__control--pressed) .label--pressed {
  display: none;
}

.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
  background: #1aafff;
  color: #fff;
}

.plyr--video .plyr__control svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
  background: #1aafff;
  color: #fff;
}

.plyr__control--overlaid {
  background: rgba(26, 175, 255, 0.8);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  color: #fff;
  display: none;
  left: 50%;
  padding: 15px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.plyr__control--overlaid svg {
  left: 2px;
  position: relative;
}

.plyr__control--overlaid:focus, .plyr__control--overlaid:hover {
  background: #1aafff;
}

.plyr--playing .plyr__control--overlaid {
  opacity: 0;
  visibility: hidden;
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
  display: block;
}

.plyr--full-ui ::-webkit-media-controls {
  display: none;
}

.plyr__controls {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  text-align: center;
}

.plyr__controls .plyr__menu, .plyr__controls .plyr__progress, .plyr__controls .plyr__time, .plyr__controls .plyr__volume, .plyr__controls > .plyr__control {
  margin-left: 5px;
}

.plyr__controls .plyr__menu + .plyr__control, .plyr__controls .plyr__progress + .plyr__control, .plyr__controls > .plyr__control + .plyr__control, .plyr__controls > .plyr__control + .plyr__menu {
  margin-left: 2px;
}

.plyr__controls > .plyr__control:first-child, .plyr__controls > .plyr__control:first-child + [data-plyr=pause] {
  margin-left: 0;
  margin-right: auto;
}

.plyr__controls:empty {
  display: none;
}

@media (min-width: 480px) {
  .plyr__controls .plyr__menu, .plyr__controls .plyr__progress, .plyr__controls .plyr__time, .plyr__controls .plyr__volume, .plyr__controls > .plyr__control {
    margin-left: 10px;
  }
}
.plyr--audio .plyr__controls {
  background: #fff;
  border-radius: inherit;
  color: #4f5b5f;
  padding: 10px;
}

.plyr--video .plyr__controls {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  bottom: 0;
  color: #fff;
  left: 0;
  padding: 20px 5px 5px;
  position: absolute;
  right: 0;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  z-index: 3;
}

@media (min-width: 480px) {
  .plyr--video .plyr__controls {
    padding: 35px 10px 10px;
  }
}
.plyr--video.plyr--hide-controls .plyr__controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

.plyr [data-plyr=airplay], .plyr [data-plyr=captions], .plyr [data-plyr=fullscreen], .plyr [data-plyr=pip] {
  display: none;
}

.plyr--airplay-supported [data-plyr=airplay], .plyr--captions-enabled [data-plyr=captions], .plyr--fullscreen-enabled [data-plyr=fullscreen], .plyr--pip-supported [data-plyr=pip] {
  display: inline-block;
}

.plyr__video-embed {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

.plyr__video-embed iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
}

.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
  padding-bottom: 240%;
  position: relative;
  transform: translateY(-38.28125%);
}

.plyr__menu {
  display: flex;
  position: relative;
}

.plyr__menu .plyr__control svg {
  transition: transform 0.3s ease;
}

.plyr__menu .plyr__control[aria-expanded=true] svg {
  transform: rotate(90deg);
}

.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
  display: none;
}

.plyr__menu__container {
  animation: plyr-popup 0.2s ease;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  color: #4f5b5f;
  font-size: 16px;
  margin-bottom: 10px;
  position: absolute;
  right: -3px;
  text-align: left;
  white-space: nowrap;
  z-index: 3;
}

.plyr__menu__container > div {
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.plyr__menu__container::after {
  border: 4px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.9);
  content: "";
  height: 0;
  position: absolute;
  right: 15px;
  top: 100%;
  width: 0;
}

.plyr__menu__container [role=menu] {
  padding: 7px;
}

.plyr__menu__container [role=menuitem], .plyr__menu__container [role=menuitemradio] {
  margin-top: 2px;
}

.plyr__menu__container [role=menuitem]:first-child, .plyr__menu__container [role=menuitemradio]:first-child {
  margin-top: 0;
}

.plyr__menu__container .plyr__control {
  align-items: center;
  color: #4f5b5f;
  display: flex;
  font-size: 14px;
  padding: 4px 11px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
}

.plyr__menu__container .plyr__control > span {
  align-items: inherit;
  display: flex;
  width: 100%;
}

.plyr__menu__container .plyr__control::after {
  border: 4px solid transparent;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.plyr__menu__container .plyr__control--forward {
  padding-right: 28px;
}

.plyr__menu__container .plyr__control--forward::after {
  border-left-color: rgba(79, 91, 95, 0.8);
  right: 5px;
}

.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after, .plyr__menu__container .plyr__control--forward:hover::after {
  border-left-color: currentColor;
}

.plyr__menu__container .plyr__control--back {
  font-weight: 500;
  margin: 7px;
  margin-bottom: 3px;
  padding-left: 28px;
  position: relative;
  width: calc(100% - 14px);
}

.plyr__menu__container .plyr__control--back::after {
  border-right-color: rgba(79, 91, 95, 0.8);
  left: 7px;
}

.plyr__menu__container .plyr__control--back::before {
  background: #b7c5cd;
  box-shadow: 0 1px 0 #fff;
  content: "";
  height: 1px;
  left: 0;
  margin-top: 4px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
}

.plyr__menu__container .plyr__control--back.plyr__tab-focus::after, .plyr__menu__container .plyr__control--back:hover::after {
  border-right-color: currentColor;
}

.plyr__menu__container .plyr__control[role=menuitemradio] {
  padding-left: 7px;
}

.plyr__menu__container .plyr__control[role=menuitemradio]::after, .plyr__menu__container .plyr__control[role=menuitemradio]::before {
  border-radius: 100%;
}

.plyr__menu__container .plyr__control[role=menuitemradio]::before {
  background: rgba(0, 0, 0, 0.1);
  content: "";
  display: block;
  flex-shrink: 0;
  height: 16px;
  margin-right: 10px;
  transition: all 0.3s ease;
  width: 16px;
}

.plyr__menu__container .plyr__control[role=menuitemradio]::after {
  background: #fff;
  border: 0;
  height: 6px;
  left: 12px;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  width: 6px;
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  background: #1aafff;
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus::before, .plyr__menu__container .plyr__control[role=menuitemradio]:hover::before {
  background: rgba(0, 0, 0, 0.1);
}

.plyr__menu__container .plyr__menu__value {
  align-items: center;
  display: flex;
  margin-left: auto;
  margin-right: -5px;
  overflow: hidden;
  padding-left: 25px;
  pointer-events: none;
}

.plyr--full-ui input[type=range] {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  border-radius: 28px;
  color: #1aafff;
  display: block;
  height: 20px;
  margin: 0;
  padding: 0;
  transition: box-shadow 0.3s ease;
  width: 100%;
}

.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
  background: 0 0;
  border: 0;
  border-radius: 2px;
  height: 4px;
  transition: box-shadow 0.3s ease;
  -webkit-user-select: none;
  user-select: none;
  background-image: linear-gradient(to right, currentColor var(--value, 0), transparent var(--value, 0));
}

.plyr--full-ui input[type=range]::-webkit-slider-thumb {
  background: #fff;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(47, 52, 61, 0.2);
  height: 14px;
  position: relative;
  transition: all 0.2s ease;
  width: 14px;
  -webkit-appearance: none;
  margin-top: -5px;
}

.plyr--full-ui input[type=range]::-moz-range-track {
  background: 0 0;
  border: 0;
  border-radius: 2px;
  height: 4px;
  transition: box-shadow 0.3s ease;
  -moz-user-select: none;
  user-select: none;
}

.plyr--full-ui input[type=range]::-moz-range-thumb {
  background: #fff;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(47, 52, 61, 0.2);
  height: 14px;
  position: relative;
  transition: all 0.2s ease;
  width: 14px;
}

.plyr--full-ui input[type=range]::-moz-range-progress {
  background: currentColor;
  border-radius: 2px;
  height: 4px;
}

.plyr--full-ui input[type=range]::-ms-track {
  background: 0 0;
  border: 0;
  border-radius: 2px;
  height: 4px;
  transition: box-shadow 0.3s ease;
  -ms-user-select: none;
  user-select: none;
  color: transparent;
}

.plyr--full-ui input[type=range]::-ms-fill-upper {
  background: 0 0;
  border: 0;
  border-radius: 2px;
  height: 4px;
  transition: box-shadow 0.3s ease;
  -ms-user-select: none;
  user-select: none;
}

.plyr--full-ui input[type=range]::-ms-fill-lower {
  background: 0 0;
  border: 0;
  border-radius: 2px;
  height: 4px;
  transition: box-shadow 0.3s ease;
  -ms-user-select: none;
  user-select: none;
  background: currentColor;
}

.plyr--full-ui input[type=range]::-ms-thumb {
  background: #fff;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(47, 52, 61, 0.2);
  height: 14px;
  position: relative;
  transition: all 0.2s ease;
  width: 14px;
  margin-top: 0;
}

.plyr--full-ui input[type=range]::-ms-tooltip {
  display: none;
}

.plyr--full-ui input[type=range]:focus {
  outline: 0;
}

.plyr--full-ui input[type=range]::-moz-focus-outer {
  border: 0;
}

.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 5px rgba(26, 175, 255, 0.5);
  outline: 0;
}

.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
  box-shadow: 0 0 0 5px rgba(26, 175, 255, 0.5);
  outline: 0;
}

.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
  box-shadow: 0 0 0 5px rgba(26, 175, 255, 0.5);
  outline: 0;
}

.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(255, 255, 255, 0.25);
}

.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
  background-color: rgba(255, 255, 255, 0.25);
}

.plyr--full-ui.plyr--video input[type=range]::-ms-track {
  background-color: rgba(255, 255, 255, 0.25);
}

.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(47, 52, 61, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(47, 52, 61, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(47, 52, 61, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(183, 197, 205, 0.66);
}

.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
  background-color: rgba(183, 197, 205, 0.66);
}

.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
  background-color: rgba(183, 197, 205, 0.66);
}

.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(47, 52, 61, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(47, 52, 61, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(47, 52, 61, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.plyr__poster {
  background-color: #000;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.2s ease;
  width: 100%;
  z-index: 1;
}

.plyr--stopped.plyr__poster-enabled .plyr__poster {
  opacity: 1;
}

.plyr__time {
  font-size: 14px;
}

.plyr__time + .plyr__time::before {
  content: "⁄";
  margin-right: 10px;
}

@media (max-width: 767px) {
  .plyr__time + .plyr__time {
    display: none;
  }
}
.plyr--video .plyr__time {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.plyr__tooltip {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  color: #4f5b5f;
  font-size: 14px;
  font-weight: 500;
  left: 50%;
  line-height: 1.3;
  margin-bottom: 10px;
  opacity: 0;
  padding: 5px 7.5px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 10px) scale(0.8);
  transform-origin: 50% 100%;
  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
  white-space: nowrap;
  z-index: 2;
}

.plyr__tooltip::before {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255, 255, 255, 0.9);
  bottom: -4px;
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2;
}

.plyr .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr .plyr__control:hover .plyr__tooltip, .plyr__tooltip--visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.plyr .plyr__control:hover .plyr__tooltip {
  z-index: 3;
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
  left: 0;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 0 100%;
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip::before, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip::before {
  left: 16px;
}

.plyr__controls > .plyr__control:last-child .plyr__tooltip {
  left: auto;
  right: 0;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 100% 100%;
}

.plyr__controls > .plyr__control:last-child .plyr__tooltip::before {
  left: auto;
  right: 16px;
  transform: translateX(50%);
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip, .plyr__controls > .plyr__control:first-child.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:first-child:hover .plyr__tooltip, .plyr__controls > .plyr__control:last-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:last-child.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:last-child:hover .plyr__tooltip {
  transform: translate(0, 0) scale(1);
}

.plyr--video {
  background: #000;
  overflow: hidden;
}

.plyr--video.plyr--menu-open {
  overflow: visible;
}

.plyr__video-wrapper {
  background: #000;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.plyr__progress {
  flex: 1;
  left: 7px;
  margin-right: 14px;
  position: relative;
}

.plyr__progress input[type=range], .plyr__progress__buffer {
  margin-left: -7px;
  margin-right: -7px;
  width: calc(100% + 14px);
}

.plyr__progress input[type=range] {
  position: relative;
  z-index: 2;
}

.plyr__progress .plyr__tooltip {
  font-size: 14px;
  left: 0;
}

.plyr__progress__buffer {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  border-radius: 100px;
  height: 4px;
  left: 0;
  margin-top: -2px;
  padding: 0;
  position: absolute;
  top: 50%;
}

.plyr__progress__buffer::-webkit-progress-bar {
  background: 0 0;
  transition: width 0.2s ease;
}

.plyr__progress__buffer::-webkit-progress-value {
  background: currentColor;
  border-radius: 100px;
  min-width: 4px;
}

.plyr__progress__buffer::-moz-progress-bar {
  background: currentColor;
  border-radius: 100px;
  min-width: 4px;
  transition: width 0.2s ease;
}

.plyr__progress__buffer::-ms-fill {
  border-radius: 100px;
  transition: width 0.2s ease;
}

.plyr--video .plyr__progress__buffer {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.25);
}

.plyr--audio .plyr__progress__buffer {
  color: rgba(183, 197, 205, 0.66);
}

.plyr--loading .plyr__progress__buffer {
  animation: plyr-progress 1s linear infinite;
  background-image: linear-gradient(-45deg, rgba(47, 52, 61, 0.6) 25%, transparent 25%, transparent 50%, rgba(47, 52, 61, 0.6) 50%, rgba(47, 52, 61, 0.6) 75%, transparent 75%, transparent);
  background-repeat: repeat-x;
  background-size: 25px 25px;
  color: transparent;
}

.plyr--video.plyr--loading .plyr__progress__buffer {
  background-color: rgba(255, 255, 255, 0.25);
}

.plyr--audio.plyr--loading .plyr__progress__buffer {
  background-color: rgba(183, 197, 205, 0.66);
}

.plyr__volume {
  align-items: center;
  display: flex;
  flex: 1;
  position: relative;
}

.plyr__volume input[type=range] {
  margin-left: 5px;
  position: relative;
  z-index: 2;
}

@media (min-width: 480px) {
  .plyr__volume {
    max-width: 90px;
  }
}
@media (min-width: 768px) {
  .plyr__volume {
    max-width: 110px;
  }
}
.plyr--is-ios .plyr__volume {
  display: none !important;
}

.plyr--is-ios.plyr--vimeo [data-plyr=mute] {
  display: none !important;
}

.plyr:-webkit-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-moz-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-ms-fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-webkit-full-screen video {
  height: 100%;
}

.plyr:-moz-full-screen video {
  height: 100%;
}

.plyr:-ms-fullscreen video {
  height: 100%;
}

.plyr:fullscreen video {
  height: 100%;
}

.plyr:-webkit-full-screen .plyr__video-wrapper {
  height: 100%;
  width: 100%;
}

.plyr:-moz-full-screen .plyr__video-wrapper {
  height: 100%;
  width: 100%;
}

.plyr:-ms-fullscreen .plyr__video-wrapper {
  height: 100%;
  width: 100%;
}

.plyr:fullscreen .plyr__video-wrapper {
  height: 100%;
  width: 100%;
}

.plyr:-webkit-full-screen .plyr__video-embed {
  overflow: visible;
}

.plyr:-moz-full-screen .plyr__video-embed {
  overflow: visible;
}

.plyr:-ms-fullscreen .plyr__video-embed {
  overflow: visible;
}

.plyr:fullscreen .plyr__video-embed {
  overflow: visible;
}

.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-webkit-full-screen.plyr--hide-controls {
  cursor: none;
}

.plyr:-moz-full-screen.plyr--hide-controls {
  cursor: none;
}

.plyr:-ms-fullscreen.plyr--hide-controls {
  cursor: none;
}

.plyr:fullscreen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:-webkit-full-screen .plyr__captions {
    font-size: 21px;
  }

  .plyr:-moz-full-screen .plyr__captions {
    font-size: 21px;
  }

  .plyr:-ms-fullscreen .plyr__captions {
    font-size: 21px;
  }

  .plyr:fullscreen .plyr__captions {
    font-size: 21px;
  }
}
.plyr:-webkit-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-webkit-full-screen video {
  height: 100%;
}

.plyr:-webkit-full-screen .plyr__video-wrapper {
  height: 100%;
  width: 100%;
}

.plyr:-webkit-full-screen .plyr__video-embed {
  overflow: visible;
}

.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-webkit-full-screen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:-webkit-full-screen .plyr__captions {
    font-size: 21px;
  }
}
.plyr:-moz-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-moz-full-screen video {
  height: 100%;
}

.plyr:-moz-full-screen .plyr__video-wrapper {
  height: 100%;
  width: 100%;
}

.plyr:-moz-full-screen .plyr__video-embed {
  overflow: visible;
}

.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-moz-full-screen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:-moz-full-screen .plyr__captions {
    font-size: 21px;
  }
}
.plyr:-ms-fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-ms-fullscreen video {
  height: 100%;
}

.plyr:-ms-fullscreen .plyr__video-wrapper {
  height: 100%;
  width: 100%;
}

.plyr:-ms-fullscreen .plyr__video-embed {
  overflow: visible;
}

.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-ms-fullscreen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:-ms-fullscreen .plyr__captions {
    font-size: 21px;
  }
}
.plyr--fullscreen-fallback {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000000;
}

.plyr--fullscreen-fallback video {
  height: 100%;
}

.plyr--fullscreen-fallback .plyr__video-wrapper {
  height: 100%;
  width: 100%;
}

.plyr--fullscreen-fallback .plyr__video-embed {
  overflow: visible;
}

.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr--fullscreen-fallback.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr--fullscreen-fallback .plyr__captions {
    font-size: 21px;
  }
}
.plyr__ads {
  border-radius: inherit;
  bottom: 0;
  cursor: pointer;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.plyr__ads > div, .plyr__ads > div iframe {
  height: 100%;
  position: absolute;
  width: 100%;
}

.plyr__ads::after {
  background: rgba(47, 52, 61, 0.8);
  border-radius: 2px;
  bottom: 10px;
  color: #fff;
  content: attr(data-badge-text);
  font-size: 11px;
  padding: 2px 6px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  z-index: 3;
}

.plyr__ads::after:empty {
  display: none;
}

.plyr__cues {
  background: currentColor;
  display: block;
  height: 4px;
  left: 0;
  margin: -2px 0 0;
  opacity: 0.8;
  position: absolute;
  top: 50%;
  width: 3px;
  z-index: 3;
}

.plyr--no-transition {
  transition: none !important;
}

.plyr__sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  border: 0 !important;
  height: 1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.plyr [hidden] {
  display: none !important;
}

/*Start chat service*/
#chatServiceWrapper {
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 25px;
  width: 260px;
  z-index: 1111111111;
  height: 500px;
  max-height: calc(100% - 25px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 7px 7px 0 0;
}

#chatServiceWrapper.createGroupModalOpened .usersList {
  height: calc(100% - 160px);
}
#chatServiceWrapper .usersList {
  height: calc(100% - 145px);
  padding-top: 7px;
}
#chatServiceWrapper .usersList ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}
#chatServiceWrapper .usersList ul .is_sera_thread {
  order: 0;
}
#chatServiceWrapper .usersList li {
  order: 1;
  cursor: pointer;
  position: relative;
}
#chatServiceWrapper .usersList li.section {
  margin: 7px 0;
  border: 0;
}
#chatServiceWrapper .usersList > ul {
  padding: 7px;
  margin: 0;
  overflow-y: scroll;
  height: 100%;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
#chatServiceWrapper .usersList > li {
  display: block;
  position: relative;
  margin: 8% 0;
  cursor: pointer;
}
#chatServiceWrapper .usersList img {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  /*margin-right: 3px;*/
  position: relative;
  background-image: url("/img/thumb.png?123");
  background-size: contain;
}
#chatServiceWrapper .usersList .userName {
  font-weight: bold !important;
  font-size: 12px !important;
  width: 85%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #444;
  margin: 6px 0;
}
#chatServiceWrapper.closed .usersList {
  height: calc(100% - 100px);
}

#chatServiceWrapper .usersList .haveUnread img {
  animation: unreadMessageAnimation 2s ease infinite;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes unreadMessageAnimation {
  0% {
    transform: scale(1);
  }
  15% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
  }
  25% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.2);
  }
  25% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4), 0 0 0 12px rgba(55, 207, 221, 0.2);
  }
}
#chatServiceWrapper .userImage {
  width: 19%;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  margin: 2px 0;
  text-align: center;
}

#chatServiceWrapper .userImage i {
  position: absolute;
  right: 2px;
  top: 5px;
  content: " ";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4f60;
  z-index: 1111;
}

#chatServiceWrapper .userImage i.online {
  background: var(--main-color);
}

#chatServiceWrapper .title {
  display: inline-block;
  width: 79%;
  margin: 0;
}

#chatServiceWrapper .title span {
  font-size: 10px;
  color: #c0c0c0;
  margin-right: 0;
  width: 85%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#chatServiceWrapper .notification, #chatService .AddToGroupIcon, #chatService .removeFromGroup {
  background: var(--main-color);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  position: absolute;
  left: 3px;
  bottom: 10px;
  padding-top: 3px;
  text-align: center;
}

#chatServiceWrapper .removeFromGroup {
  background: transparent;
  color: #e5301c;
}

#chatServiceWrapper.closed .notification {
  left: 190px;
}

#chatServiceWrapper .chatBottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 11111;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
#chatServiceWrapper .chatBottom .add_and_return_conversation_btn {
  display: block;
  margin: 5px auto 0;
  width: 95%;
}

#chatServiceWrapper.closed .chatBottom {
  border-top: 0;
}
#chatServiceWrapper.closed .chatBottom .add_and_return_conversation_btn {
  display: none;
}

#chatServiceWrapper .chat-bottom-tabs-container {
  width: 100%;
  text-align: center;
  background: #fff;
  height: 60px;
  padding: 10px 10%;
}
#chatServiceWrapper .chat-bottom-tabs-container button {
  border: 0;
  box-shadow: unset;
  border-radius: 0;
}
#chatServiceWrapper .chat-bottom-tabs-container button:first-child {
  border-left: 1px solid #eee;
}
#chatServiceWrapper .chat-bottom-tabs-container button i {
  font-size: 20px;
  margin-bottom: 4px;
}
#chatServiceWrapper .chat-bottom-tabs-container button.active {
  color: var(--main-color);
}

.chatBoxWrapper .chatBoxHeader.loading {
  background: linear-gradient(270deg, #5b86e5, var(--main-color));
  background-size: 400% 400%;
  -webkit-animation: loadingChat 2s ease infinite;
  -moz-animation: loadingChat 2s ease infinite;
  -o-animation: loadingChat 2s ease infinite;
  animation: loadingChat 2s ease infinite;
}

.chatBoxWrapper .chatBoxHeader.loading * {
  color: #fff !important;
}

@-webkit-keyframes loadingChat {
  0% {
    background-position: 0% 51%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 51%;
  }
}
@-moz-keyframes loadingChat {
  0% {
    background-position: 0% 51%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 51%;
  }
}
@-o-keyframes loadingChat {
  0% {
    background-position: 0% 51%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 51%;
  }
}
@keyframes loadingChat {
  0% {
    background-position: 0% 51%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 51%;
  }
}
#chatServiceWrapper .chatLogo i {
  font-size: 2.2em;
  color: var(--main-color);
}

#chatServiceWrapper.closed .chatLogo i {
  font-size: 3em;
}

#chatServiceWrapper .chatLogo span {
  color: var(--main-color);
  font-size: 1.4em;
  margin-right: 8px;
}

#chatServiceWrapper .chatSetting span {
  display: inline-block;
  margin: 0 3%;
}

#chatServiceWrapper .chatSetting {
  margin: 5px;
  position: relative;
}

#chatServiceWrapper .chatSetting i {
  color: var(--main-color);
  font-size: 1.6em;
  cursor: pointer;
}

#chatServiceWrapper .chatSetting .setting i {
  transform: rotate(-90deg);
}

#chatServiceWrapper .chatSetting input::-webkit-input-placeholder {
  color: #cecece;
}

#chatServiceWrapper .listTitle {
  padding: 5px;
  border-bottom: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
  color: #444;
  font-size: 12px;
  margin: 0;
  font-weight: 600 !important;
  cursor: default;
}

#chatServiceWrapper.closed {
  left: -260px;
}
#chatServiceWrapper.closed .NoConversationsMsg h4 {
  display: none;
}
#chatServiceWrapper.closed .usersList, #chatServiceWrapper.closed .chatSetting, #chatServiceWrapper.closed .listTitle,
#chatServiceWrapper.closed .chatSetting input, #chatServiceWrapper.closed .chatSetting .setting,
#chatServiceWrapper.closed .chatLogo span, #chatServiceWrapper.closed .toggleList.closeBtn {
  display: none;
}

#chatServiceWrapper .toggleList.open {
  display: none;
}

#chatServiceWrapper.closed .toggleList.open {
  display: block;
  text-align: center;
  margin-bottom: 9px;
}

#chatServiceWrapper.closed .toggleList.open i {
  color: var(--main-color) !important;
}

#chatServiceWrapper.closed .chatSetting span {
  margin: 0 5%;
}

#chatServiceWrapper.closed .usersList ul {
  padding: 0 11px;
  overflow: hidden;
}

#chatServiceWrapper.closed .usersList ul .title .userName, #chatServiceWrapper.closed .title span {
  /*margin-right: 11%;*/
  display: none;
}

@keyframes Chat-Service-Transform-close {
  0% {
    left: 0px;
  }
  50% {
    left: -260px;
  }
  100% {
    left: -190px;
  }
}
@keyframes Chat-Service-Transform-open {
  0% {
    left: -190px;
  }
  50% {
    left: -260px;
  }
  100% {
    left: 0px;
  }
}
.chatBoxWrapper {
  position: relative;
  height: 500px;
  width: 385px;
  margin-left: 10px;
  float: left;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  z-index: 11111111;
  direction: rtl;
}
.chatBoxWrapper:first-child {
  margin-left: 30px;
}

.chatBoxWrapper .chatBoxHeader {
  min-height: 40px;
  padding: 5px 10px;
  background: var(--main-color);
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
  position: relative;
}
.chatBoxWrapper .chatBoxHeader:after {
  position: absolute;
  content: "";
  top: calc(100% - 11px);
  width: 100%;
  left: 0;
  min-height: 20px;
  z-index: 1;
  background: var(--main-color);
  -webkit-clip-path: ellipse(50% 40% at 50% 51%);
}
.chatBoxWrapper .chatBoxHeader .userStatus {
  margin-left: 5px;
  margin-bottom: 5px;
}
.chatBoxWrapper .chatBoxHeader .userImage img {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  object-fit: cover;
}

.chatBoxWrapper .chatBoxHeader h5 {
  display: inline-block;
  width: calc(100% - 60px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #fff;
  margin-top: 3px;
  margin-bottom: 5px;
  font-size: 13px;
  text-align: right;
  padding-right: 4px;
}
.chatBoxWrapper .chatBoxHeader h5 i {
  display: block;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  margin-top: 2px;
}

.chatBoxWrapper .chatBoxHeader .userStatus i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: #ff4f60;
}

.chatBoxWrapper .chatBoxHeader .userStatus i.online {
  background: #68e327;
}

.chatBoxWrapper .chatBoxHeader .userStatus i.groupBoxIcon {
  background: transparent;
  color: var(--main-color);
  font-size: 11px;
  right: 6px;
  top: 7px;
}

.chatBoxWrapper .chatboxMessage {
  position: absolute;
  bottom: 0;
  width: 100%;
  border: 0;
  border-top: 1px solid #e0e0e0;
  background: #fff;
  padding: 7px !important;
  padding-left: 55px !important;
  resize: none;
  height: 52px;
  text-align: right;
  direction: rtl;
}

/*.chatBoxWrapper .fa-send, .chatBoxWrapper .chatAttachBtn, .chatBoxWrapper .chatRecordBtn {
  position: absolute;
  bottom: 20px;
  left: 15px;
  color: $primary;
  font-size: 1.4em;
  display: flex;
  justify-content: center;
  align-items: center;
}*/
/*.chatBoxWrapper .fa-send:hover,
.chatBoxWrapper .chatAttachBtn:hover,
.chatBoxWrapper .chatRecordBtn:hover {
  color: #45939a;
  cursor: pointer;
}*/
.chatBoxWrapper .chatAttachBtn {
  margin: unset !important;
  left: 39px;
  transform: rotateX(180deg);
}

/*.chatBoxWrapper .chatRecordBtn {
  left: 60px;
}*/
.chatBoxWrapper .chatRecordBtn.startRecord {
  color: #ff4f5f;
}

.chatBoxWrapper .chatAttachBtn input {
  display: none !important;
}

.chatBoxWrapper .chatboxMessage:focus {
  box-shadow: 0;
  border-top: 1px solid var(--main-color);
}

.chatBoxWrapper .chatboxMessage::-webkit-input-placeholder {
  color: #898787;
  font-size: 13px;
}

.chatBoxWrapper .chatArea {
  height: calc(100% - 92px);
  overflow-y: scroll;
  padding: 17px 0 5px;
  overflow-x: hidden;
  width: 100%;
}
.chatBoxWrapper .chatArea .select-type-of-sera-chat {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 10px;
  background: #fff;
  z-index: 1;
}
.chatBoxWrapper .chatArea .select-type-of-sera-chat .btn {
  border-color: var(--main-color);
  box-shadow: unset;
  background: rgba(var(--main-color-rgb), 20%);
  color: #444;
  padding: 5px 7px;
  margin-left: 5px;
  border-radius: 25px;
}

.chatArea .userImage {
  display: inline-block;
  width: 18%;
  text-align: center;
  vertical-align: top;
}

.chatArea .userImage img {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.chatArea .content {
  width: 75%;
  display: inline-block;
  margin-bottom: 4%;
}

.chatArea .content li {
  list-style: none;
}
.chatArea .content li ul li, .chatArea .content li ol li {
  list-style: unset;
  margin-right: 20px;
}

.chatArea .content li p {
  background: #f5f5f5;
  border-radius: 9px;
  color: #444;
  font-size: 13px;
  padding: 0px;
  display: inline-block;
  position: relative;
  /* For Firefox */
  word-break: break-all;
  text-align: right;
  /* For Chrome and IE */
  word-wrap: break-word;
  word-break: break-word;
}

.chatArea .content li p span {
  padding: 4px 8px;
  display: inline-block;
  font-size: 13px;
  direction: rtl;
}
.chatArea .content li p span a {
  flex: 1;
  width: 100%;
}

a.attachment-link {
  display: block;
  overflow: hidden;
  padding: 0 6px;
  text-align: center;
}

.chat-attachment-date {
  display: block;
  text-align: center;
  padding: 0 6px;
}

.attachment-link:after {
  content: "\f15b";
  font-family: FontAwesome;
  font-size: 3.2em;
  display: block;
  margin: 10px;
}

.attachment-link.file-doc:after, .attachment-link.file-docx:after {
  content: "\f1c2";
}

.attachment-link.file-pptx:after, .attachment-link.file-ppt:after, .attachment-link.file-pptm:after {
  content: "\f1c4";
}

.attachment-link.file-csv:after, .attachment-link.file-xls:after {
  content: "\f1c3";
}

.attachment-link.file-zip:after, .attachment-link.file-rar:after {
  content: "\f1c6";
}

.attachment-link.file-txt:after {
  content: "\f1c9";
}

.attachment-link.file-pdf:after {
  content: "\f1c1";
}

.chatArea .sender .content li p {
  background: rgba(var(--main-color-rgb), 0.3);
  color: #444;
  margin: 0;
}

.select-sections-disable-chat {
  width: 100%;
  padding: 3px;
}

.select-sections-disable-chat select {
  width: 100%;
  height: 31px;
}

.chatBoxWrapper .chatArea .date {
  text-align: center;
  color: #9ca0a7;
  display: block;
  font-size: 10px;
  margin: 8% 0;
}

.chatBoxWrapper .add_remove_member {
  text-align: center;
  color: #9ca0a7;
  display: block;
  font-size: 10px;
  margin: 3px 0;
}

.chatBoxWrapper .chatArea .sender {
  direction: rtl;
}

.chatBoxWrapper .chatArea .seen {
  text-align: right;
  font-size: 10px;
  color: #90949c;
  margin-right: 10px;
}

#chatServiceWrapper .chatFab {
  width: 50px;
  height: 50px;
  background: #68E327;
  position: fixed;
  bottom: 15px;
  left: 5%;
  text-align: center;
  border-radius: 50%;
  box-shadow: 2px 3px 10px #999898;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#chatServiceWrapper .chatFab i {
  font-size: 2.2em;
  text-align: center;
  color: #fff;
}
#chatServiceWrapper .chatFab .count_of_unread_messages {
  position: absolute;
  top: -10px;
  right: -10px;
  color: #fff;
  background: #e5301c;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 11px;
  box-shadow: 2px 3px 10px #999898;
}
#chatServiceWrapper .chatFab .robotBox {
  display: none;
}
#chatServiceWrapper .chatFab.robotTalking {
  background: transparent;
  height: 150px;
  width: 120px;
  border-radius: unset;
  box-shadow: unset;
}
#chatServiceWrapper .chatFab.robotTalking i {
  display: none;
}
#chatServiceWrapper .chatFab.robotTalking .robotBox {
  display: block;
}
#chatServiceWrapper .chatFab.robotTalking .robotBox img {
  width: 125px;
  position: relative;
  top: 10px;
  filter: drop-shadow(0px 3px 6px var(--main-color));
}
@media screen and (max-width: 750px) {
  #chatServiceWrapper .chatFab.robotTalking .robotBox img {
    width: 90px;
  }
}
#chatServiceWrapper .chatFab.robotTalking .robotBox .robotIcon {
  font-size: 8em;
}
#chatServiceWrapper .chatFab.robotTalking .robotBox .robot_text_wrapper {
  position: absolute;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid var(--main-color);
  margin-bottom: 20px;
  top: -55px;
  min-width: 100px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.2));
}
@media screen and (max-width: 750px) {
  #chatServiceWrapper .chatFab.robotTalking .robotBox .robot_text_wrapper {
    min-width: 80px;
    top: -52px;
  }
}
#chatServiceWrapper .chatFab.robotTalking .robotBox .robot_text_wrapper:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 20px;
  height: 20px;
  border-radius: 1px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid var(--main-color);
  border-left: 0;
  border-top: 0;
}
#chatServiceWrapper .chatFab.robotTalking .robotBox .robot_text_wrapper p {
  color: #444;
  font-weight: 400;
  margin-bottom: 0;
}
#chatServiceWrapper .chatFab.robotTalking .robotBox .robot_text_wrapper p.withoutAnimation {
  display: none;
  width: 160px;
}
@media screen and (max-width: 750px) {
  #chatServiceWrapper .chatFab.robotTalking .robotBox .robot_text_wrapper p.withoutAnimation {
    width: 130px;
  }
}
#chatServiceWrapper .chatFab.robotTalking .robotBox .robot_text_wrapper p.withAnimation {
  width: 105px;
  white-space: nowrap;
  overflow: hidden;
  border-left: 4px solid #212121;
  animation: cursor_robot 1s step-start infinite, text_robot 5s steps(18) alternate infinite;
}
#chatServiceWrapper .chatFab.robotTalking .robotBox:hover .robot_text_wrapper p.withoutAnimation {
  display: block;
}
#chatServiceWrapper .chatFab.robotTalking .robotBox:hover .robot_text_wrapper p.withAnimation {
  display: none;
}

.chatNav {
  position: fixed;
  bottom: 0;
  left: 275px;
  direction: ltr;
  z-index: 11111;
}

.chatNav .chatNavParent {
  position: relative;
  width: 100%;
}

#chatService {
  position: fixed;
  bottom: 0;
  z-index: 999999;
}

.chatBoxActions span {
  margin: 0px 5px;
  font-size: 1.4em;
}

.chatSettingBtn {
  display: block;
}

#ChatSettingModal .modal-header,
#disabledUserModal .modal-header {
  background-color: #fff;
  border-bottom: 2px solid var(--main-color);
}

#disabledUserModal .modal-footer {
  background-color: #fff;
}

#disabledUserModal input {
  font-size: 13px;
  color: #858585;
  background-color: #fbfbfb;
  border: 1px solid #d5d5d5;
  padding: 6px 12px;
  border-radius: 4px;
}

.disableChatLabel,
.disableChatCheckbox {
  display: inline-block;
}

#ChatSettingModal .modal-content {
  float: right;
}

.PermissionsDeniedList p {
  position: relative;
  padding: 7px;
  width: 47%;
  margin: 2% 1%;
  display: inline-block;
  border-radius: 3px;
  color: #555;
  border: 1px solid #e0e0e0;
  font-size: 12px;
}

#ChatSettingModal .PermissionsDeniedList {
  overflow-y: auto;
  height: 200px;
}

#ChatSettingModal .PermissionsDeniedList.disable:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 1;
}

@media screen and (max-width: 550px) {
  #ChatSettingModal .PermissionsDeniedList p {
    display: block;
    width: 98%;
    word-break: break-all;
    font-size: 11px;
  }

  .PermissionsDeniedList p i {
    right: 6px;
  }
}
#chatService .messageError {
  padding: 5px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

#ChatSettingModal .errorMessage p {
  display: none;
  font-size: 14px;
  text-align: center;
  color: #ff4f60;
}

.PermissionsDeniedList p i:hover {
  color: var(--main-color);
}

#chatServiceWrapper .chatSetting i:hover {
  color: #888;
}

#chatService {
  display: none;
}

.chatBoxWrapper .chatBoxHeader .chatBoxActions i {
  color: #fff;
  transition: ease-in-out 0.3s;
  cursor: pointer;
  font-size: 14px;
}

.chatBoxWrapper .chatBoxHeader .chatBoxActions i:hover {
  opacity: 0.8;
}

.chatServiceWrapper .CloseChatList {
  position: absolute;
  right: -22px;
  background: var(--main-color);
  color: #fff;
  padding: 2px 5px;
  font-size: 16px;
  top: 5px;
}

.chatServiceWrapper.closed .CloseChatList {
  display: none;
}

.chatArea .content li p img {
  max-width: 100%;
}

.chatArea .content li p audio {
  width: 230px;
}

.chatArea .content li p.hasAttach {
  background: #fff;
  border-radius: 0;
  border: 0;
}

#chatServiceWrapper .createFormModal {
  display: none;
}

.chatArea .content li p video {
  max-height: 200px;
}

#chatServiceWrapper .userImage .groupIcon i {
  font-size: 12px;
  right: -8px;
  top: -5px;
  background: var(--main-color);
  width: 18px;
  height: 18px;
  padding-top: 3px;
  color: #fff;
}

.chatBoxActions .confirmMessage {
  left: 106%;
}

@media screen and (max-width: 750px) {
  @keyframes Chat-Service-Transform-close {
    0% {
      left: 0px;
    }
    100% {
      left: -260px;
    }
  }
  .chatBoxWrapper {
    height: 100%;
    position: fixed;
    z-index: 1111111111;
    right: 0;
    top: 0;
  }

  .evidence_accreditation a {
    right: auto !important;
    left: 5%;
    bottom: 69px !important;
  }

  /*.chatBoxWrapper .fa-send, .chatBoxWrapper .chatAttachBtn, .chatBoxWrapper .chatRecordBtn {
    padding: 6px;
    bottom: 8px;
  }*/
  /* .chatBoxWrapper .chatRecordBtn {
     left: 70px;
   }

   .chatBoxWrapper .chatAttachBtn {
     left: 38px;
     bottom: -5px;
   }*/
}
.chatSetting label {
  margin-right: 15px;
}

.chatSetting #SchoolAllowSchoolChat {
  margin-top: 0px;
  margin-right: -20px !important;
}

.chatBoxWrapper .settingChat .chatSettingMenu {
  position: absolute;
  top: 18px;
  left: -3px;
  display: none;
  background: #fff;
  border-radius: 3px;
  font-size: 12px;
  color: #777;
  width: 115px;
  z-index: 1111111111;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

.chatBoxWrapper .settingChat {
  position: relative;
}

.chatBoxWrapper .settingChat.opend .chatSettingMenu {
  display: block;
}

.chatBoxWrapper .chatBoxHeader .settingChat.opend i {
  opacity: 0.7;
}

.chatBoxWrapper .settingChat .chatBoxAction {
  padding: 7px;
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.chatBoxWrapper .settingChat .chatBoxAction:hover {
  color: var(--main-color);
}

.chatSetting .setting ul {
  position: absolute;
  width: 250px;
  background: #fff;
  display: none;
  z-index: 999999;
  padding: 0 !important;
  top: 29px;
  left: -6px;
  box-shadow: 0 0 3px #e0e0e0;
  transition: 1s ease-in-out;
  list-style: none;
}

.chatSetting .setting ul li {
  padding: 10px 7px;
  background: #fff;
  border-bottom: 1px solid #f1efef;
  color: #444;
  margin: 0 !important;
  text-align: center;
}

.chatSetting .setting ul li:hover {
  background: #f7f7f7;
}

#chatServiceWrapper .chatSetting .setting ul.opend {
  display: block;
}

#chatServiceWrapper .blockUsersList, #chatServiceWrapper .searchResultList {
  z-index: 111111;
  width: 100%;
  height: calc(100% - 88px);
  background: #fff;
  overflow-y: hidden;
  display: block;
  position: relative;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
#chatServiceWrapper .blockUsersList .list, #chatServiceWrapper .blockUsersList .usersList, #chatServiceWrapper .searchResultList .list, #chatServiceWrapper .searchResultList .usersList {
  overflow-y: auto;
  height: calc(100% - 10px);
  padding-top: 0;
}
#chatServiceWrapper .blockUsersList li, #chatServiceWrapper .searchResultList li {
  padding: 5px;
  list-style: none;
  border-bottom: 0.5px solid #ddd;
  color: #444;
  transition: transform ease-in-out 0.5s;
  font-size: 12px;
  position: relative;
}
#chatServiceWrapper .blockUsersList li:hover, #chatServiceWrapper .searchResultList li:hover {
  background: #eee;
}
#chatServiceWrapper .blockUsersList .noUsersBlocked, #chatServiceWrapper .searchResultList .noUsersBlocked {
  display: block;
  font-size: 15px;
  color: #555;
  text-align: center;
  padding: 14px;
}
#chatServiceWrapper .blockUsersList li .unblock, #chatServiceWrapper .searchResultList li .unblock {
  position: absolute;
  left: 15px;
  font-size: 10px;
  color: #888;
  cursor: pointer;
}
#chatServiceWrapper .blockUsersList li .unblock:hover, #chatServiceWrapper .searchResultList li .unblock:hover {
  color: #666;
}
#chatServiceWrapper .blockUsersList .closeUsersBlockedSection, #chatServiceWrapper .searchResultList .closeUsersBlockedSection {
  position: absolute;
  left: 0;
  font-size: 15px;
  bottom: 0;
  width: 100%;
  text-align: center;
  height: 45px;
  width: 100%;
  background: #fafafa;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  z-index: 111111;
}
#chatServiceWrapper .blockUsersList .closeUsersBlockedSection button, #chatServiceWrapper .searchResultList .closeUsersBlockedSection button {
  margin: 5px;
}

#chatServiceWrapper .createGroupModal {
  z-index: 111111;
  width: 100%;
  height: calc(100% - 130px);
  background: #fff;
  overflow-y: auto;
  display: none;
  position: relative;
}

#chatServiceWrapper .createGroupModal {
  height: 20%;
}

#chatServiceWrapper .createGroupModal {
  padding: 10px;
}

.createGroupModal .closeCreateGroupModal {
  position: absolute;
  left: 0;
  font-size: 15px;
  bottom: 0;
  width: 14px;
  text-align: center;
  height: 15px;
  line-height: 15px;
  width: 100%;
  color: #555;
  cursor: pointer;
  background: #eee;
}

@media screen and (max-width: 550px) {
  #chatServiceWrapper {
    z-index: 11111;
  }

  .chatBoxWrapper {
    width: 100%;
    position: fixed;
    left: -4px;
    top: 0;
  }

  .PermissionsDeniedList p i {
    right: 6px;
  }
}
#chatServiceWrapper .usersListSections {
  z-index: 111111;
  width: 100%;
  height: calc(100% - 108px);
  background: #fff;
  position: relative;
}

#chatServiceWrapper .opend.usersListSections {
  display: block;
}

#chatServiceWrapper .usersListSections li {
  padding: 7px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  color: #555;
}

#chatServiceWrapper .closeusersListSections {
  position: absolute;
  left: 0;
  font-size: 15px;
  bottom: 0;
  width: 14px;
  text-align: center;
  height: 15px;
  line-height: 15px;
  width: 100%;
  color: #555;
  cursor: pointer;
  background: #eee;
  z-index: 9999999;
}

.usersListSections li.disable {
  display: none;
}

#chatServiceWrapper .usersListSections .disabledUsersBtn {
  position: fixed;
  padding: 5px;
  background: #fff;
  z-index: 1111111;
  width: 100%;
  bottom: 84px;
  border-top: 2px solid var(--main-color);
  color: #666;
}

#chatServiceWrapper .usersListSections .disabledUsersBtn span, #chatServiceWrapper .usersListSections .disabledUsersBtn button {
  display: inline-block;
  margin: 5px;
}

#chatServiceWrapper .usersListSections .disabledUsersBtn button {
  background: var(--main-color);
  color: #fff;
  transition: ease-in-out 1s;
}

#chatServiceWrapper .usersListSections .disabledUsersBtn button:hover {
  background: #fff;
  color: var(--main-color);
}

.PermissionsDeniedList p i {
  position: absolute;
  left: 10px;
  font-size: 15px;
}

.chatBoxWrapper .settingChat .blockUserMenu:before {
  content: "";
  position: absolute;
  top: -7px;
  left: 3px;
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #ddd;
}

#chatServiceWrapper.createGroupOpen .usersList > ul {
  padding-bottom: 228px !important;
}

.plyr--audio .plyr__controls {
  background: #f2f2f2 !important;
}

.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
  background: var(--main-color) !important;
}

.plyr--full-ui input[type=range] {
  color: var(--main-color) !important;
}

.usersListSections input[type=checkbox] {
  margin-right: 10px;
  vertical-align: bottom;
}

.chatBoxWrapper:not(.maximizeBox) .sender .plyr--audio .plyr__controls {
  float: left;
}

.chatArea a.attachment-link {
  color: #444;
  text-decoration: underline;
}

#chatServiceWrapper .usersListSections ul {
  height: calc(100% - 75px);
  overflow-y: auto;
}

.chatBoxWrapper:not(.maximizeBox) .plyr--audio .plyr__controls {
  width: 187px;
}

.chatBoxHeader a {
  color: #fff;
}

.groupNameInputWrrapper {
  display: none;
}

.groupNameInputWrrapper.createGroupActive {
  display: block;
}

.groupNameInputWrrapper input {
  width: 69%;
  display: inline-block;
  min-height: 31px;
  padding: 4px;
  border: 0;
  border-bottom: 1px solid #eee;
}

.groupNameInputWrrapper button {
  display: inline-block;
  width: 30%;
  padding: 5px;
  border-radius: 0;
}

#chatService .createGroupActions {
  position: absolute;
  left: 0;
  font-size: 15px;
  bottom: 0;
  width: 100%;
  text-align: center;
  height: 45px;
  width: 100%;
  background: #fafafa;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  z-index: 111111;
}

#chatService .AddToGroupIcon {
  display: none;
}

#chatServiceWrapper.createGroupOpen .notification, #chatServiceWrapper.createGroupOpen li[data-creator_id], #chatServiceWrapper.createGroupOpen li.section {
  display: none;
}

#chatServiceWrapper.createGroupOpen .AddToGroupIcon {
  display: block;
  padding-top: 0px;
  pointer-events: all;
}

#chatService .AddToGroupIcon i, #chatService .removeFromGroup i {
  font-size: 20px;
}

.groupListToAdd .usersList li {
  pointer-events: none;
}

.usersListToAdd span, .userListToRemove span {
  display: inline-flex;
  padding: 5px 5px;
  border-radius: 4px;
  color: #444;
  margin: 2px;
  border: 1px solid #eee;
  justify-content: center;
  align-items: center;
  background: #fafafa;
}
.usersListToAdd span i, .userListToRemove span i {
  margin: 0;
  margin-right: 5px;
  color: #e5301c;
  font-size: 16px;
}

.createGroupModal .form-group {
  margin-bottom: 3px;
}

.createGroupActions button {
  margin: 5px;
}

.createGroupActions button.disabled {
  pointer-events: none;
}

.createGroupActions button.EditGroupButton, .createGroupModal.EditGroup button.CreateGroupButton, .removeParticipants .createGroupModal button.CreateGroupButton, .createGroupActions button.removeParticipantsButton {
  display: none;
}

.createGroupModal.EditGroup button.EditGroupButton {
  display: inline-block;
}

.removeParticipants .createGroupModal button.removeParticipantsButton {
  display: inline-block;
}

#chatServiceWrapper .createGroupModal {
  min-height: 120px;
  position: static;
  border-bottom: 1px solid #ddd;
  border-radius: 5px;
}

.removeParticipants .AddToGroupIcon {
  background: transparent !important;
}

.removeParticipants .removeIcon {
  display: block !important;
  color: #ff4f5e;
}

#chatServiceWrapper .userImage .groupIcon {
  position: relative;
  font-size: 14px;
  background: none;
  border: 1px solid #d0d0d0;
  width: 35px;
  height: 35px;
  text-align: center;
  padding: 6px;
  border-radius: 50%;
  color: #888;
  background-color: #d0d0d0;
  display: inline-block;
}

.chatBoxActions .confirmMessage {
  position: absolute;
  display: none;
  top: 6px;
  width: 124px;
  background: #fff;
  border: 1px solid #eee;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.chatBoxActions .confirmMessage h4 {
  background: #eee;
  margin: 0;
  padding: 4px;
  margin-bottom: 8px;
  color: #555;
}

.chatBoxActions .confirmMessage .confirmBody {
  text-align: center;
}

.chatBoxActions .confirmMessage .confirmBody button {
  box-shadow: none;
  background: #E57373;
  color: #fff;
  border: 0;
  padding: 3px 10px;
  margin: 8px 2px;
}

.chatBoxActions .confirmMessage .confirmBody button.yes {
  background: #66BB6A;
}

.chatBoxWrapper .settingArea {
  width: 100%;
  background: red;
  overflow-y: auto;
  height: calc(100% - 79px);
  display: none;
}

/*maximize chat box*/
.maximizeBoxStatus .chatBoxWrapper {
  display: none !important;
}

.chatBoxWrapper .minimizeIcon, .chatBoxWrapper.maximizeBox .maximizeIcon {
  display: none;
}

.chatBoxWrapper.maximizeBox .minimizeIcon {
  display: inline-block;
}

.chatBoxWrapper.maximizeBox {
  display: block !important;
  height: 100%;
  width: 100%;
  right: 20px;
  position: absolute;
}

.maximizeBoxStatus #chatServiceWrapper .closeBtn {
  display: none !important;
}

.maximizeBoxStatus .chatNav .chatNavParent {
  width: calc(100% - 240px);
  height: 100%;
}

.maximizeBoxStatus .chatNav {
  width: 100%;
  height: 100%;
}

.maximizeBoxStatus .maximizeBox .chatBoxHeader {
  height: 45px;
  z-index: 111;
  padding-top: 6px;
  box-shadow: none;
  border-bottom: 1px solid #eee;
}

.maximizeBox.chatBoxWrapper .chatBoxHeader .userStatus i.groupBoxIcon {
  right: 12px;
  top: 12px;
  font-size: 18px;
}

.maximizeBox.chatBoxWrapper .chatBoxHeader h5 {
  font-size: 17px;
}

.maximizeBoxStatus #chatServiceWrapper {
  box-shadow: none;
  border-right: 1px solid #eee;
}

.maximizeBox .chatBoxActions span {
  margin: 0 10px;
}

.maximizeBox .chatArea .userImage img {
  width: 50px;
  height: 50px;
}

.maximizeBox .chatArea .content li p {
  font-size: 14px;
  padding: 5px 10px;
}

.maximizeBox .chatArea .content li p.hasAttach {
  max-width: 300px;
}

.maximizeBox .chatArea .content li p video {
  width: 500px;
}

.maximizeBoxStatus .microphoneFab {
  display: none !important;
}

.maximizeBox .chatArea .content li p audio {
  margin-top: 0;
}

.maximizeBox .chatArea .content li p img {
  border: 1px solid #eee;
  border-radius: 10px;
}

.maximizeBox .chatArea .content li p span {
  padding: 4px 20px;
}

.maximizeBox.chatBoxWrapper .chatBoxHeader .userStatus i {
  right: 10px;
  top: 16px;
  width: 10px;
  height: 10px;
}

@media screen and (max-width: 861px) {
  .minimizeIcon, .maximizeIcon {
    display: none;
  }
}
.chatBoxWrapper .chatBtnActionsWrapper {
  display: flex;
  justify-content: center;
  width: auto;
  position: absolute;
  left: 5px;
  bottom: 18px;
  align-items: center;
  flex-direction: row-reverse;
}
.chatBoxWrapper .chatBtnActionsWrapper i {
  color: var(--main-color);
  font-size: 1.4em;
  margin: 0 5px;
}
.chatBoxWrapper .chatBtnActionsWrapper i.mic.recording {
  color: #e5301c;
  animation: recording 600ms alternate infinite;
}
.chatBoxWrapper .chatBtnActionsWrapper i:hover {
  cursor: pointer;
  color: rgba(var(--main-color-rgb), 90%);
}

.chatBoxWrapper .chatArea .participantAR {
  margin: 4% 0 7%;
}

.chatBoxWrapper .chatArea .participantAR span {
  text-decoration: underline;
  color: #777;
}

.usersList .loader {
  width: 50px;
  background-size: 100%;
}

.chatServiceWrapper .disabled {
  pointer-events: none;
  opacity: 0.6;
}

.NoConversationsMsg {
  color: #ddd;
  text-align: center;
}
.NoConversationsMsg i {
  font-size: 35px;
}

.createGroupModal .groupSelectedName {
  font-weight: 500 !important;
  margin-top: 3px;
}
.createGroupModal .groupSelectedName i {
  color: var(--main-color);
  font-size: 15px;
  margin-left: 8px;
}

.chatBoxWrapper .noMoreMessages {
  color: #aeaeae;
  text-align: center;
}
.chatBoxWrapper .chatBoxLoader {
  background: url(../../img/classera_loading.gif) no-repeat;
  width: 30px;
  height: 30px;
  margin: 5px auto;
  background-size: contain;
}
.chatBoxWrapper .new_message_by_socket {
  background: var(--main-color);
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}
.chatBoxWrapper .new_message_by_socket i {
  margin-right: 5px;
}

.chat-service-nav {
  position: relative;
}
.chat-service-nav .chat-service-nav-top {
  background: var(--main-color);
  color: #fff;
  padding: 10px 5px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.chat-service-nav .chat-service-nav-top .chat-nav-actions i {
  padding: 0 5px;
  cursor: pointer;
}
.chat-service-nav .chat-service-nav-top .chat-nav-actions i.icon-search2 {
  font-size: 20px;
}
.chat-service-nav .chat-service-nav-top .chat-nav-actions i.icon-close {
  font-size: 15px;
}
.chat-service-nav .chat-service-nav-top .chat-nav-actions i:hover {
  opacity: 0.7;
}
.chat-service-nav .chat-service-nav-top .user-info-container img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-left: 10px;
}
.chat-service-nav .chat-service-nav-bottom {
  border-bottom: 2px solid #eee;
}
.chat-service-nav .chat-service-nav-bottom.hide-content {
  opacity: 0;
  pointer-events: none;
}
.chat-service-nav .chat-service-nav-bottom .tap-nav {
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.chat-service-nav .chat-service-nav-bottom .tap-nav.active {
  border-bottom: 2px solid var(--main-color);
  margin-bottom: -1px;
}
.chat-service-nav .search-form {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 2px);
  background: #fff;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  padding: 10px;
  border-bottom: 2px solid #eee;
}
.chat-service-nav .search-form button {
  padding: 3px 10px;
  margin-bottom: 4px;
  font-size: 12px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.chat-service-nav .search-form button:hover {
  box-shadow: unset;
}
.chat-service-nav .search-form input {
  background: #fafafa;
  border: 0.5px solid #ddd;
  border-radius: 25px;
  width: 80%;
  padding: 5px 10px;
}
.chat-service-nav .search-form .icon-close {
  border: 1px solid var(--main-color);
  color: var(--main-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  font-size: 10px;
  cursor: pointer;
  margin-right: 15px;
}
.chat-service-nav .search-form .icon-close:hover {
  opacity: 0.7;
}

.chat-service-home {
  position: absolute;
  left: 0;
  height: calc(100% - 60px);
  top: 0;
  width: 100%;
  padding: 15px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(var(--main-color-rgb), 40%) 0%, rgba(var(--main-color-rgb), 40%) 60%, rgba(var(--main-color-rgb), 30%) 75%, #fafafa 100%);
}
.chat-service-home .close-chat-btn {
  color: var(--main-color);
  font-weight: bold;
}
.chat-service-home .chat-home-cards {
  margin-top: 30px;
}
.chat-service-home .home-card {
  cursor: pointer;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #eee;
  margin-bottom: 15px;
  padding: 7px;
  min-height: 70px;
}
.chat-service-home .home-card h5 {
  margin-bottom: 2px;
}
.chat-service-home .home-card img {
  margin-left: 7px;
  width: 40px;
  height: auto;
}
.chat-service-home .home-card i {
  font-size: 20px;
  color: #eee;
}
.chat-service-home .home-card p {
  margin-right: 7px;
  margin-bottom: 0;
}

.chatServiceWrapper.open .chatFab {
  display: none !important;
}

.chat-service-chat-tab {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

@keyframes recording {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}
@keyframes cursor_robot {
  0%, 100% {
    border-color: #444;
  }
}
@keyframes text_robot {
  0% {
    width: 0;
  }
  100% {
    width: 105px;
  }
}
#chatService .usersList li[id="615002389"] img {
  background: #fff;
}

/*#region Animations*/
@-webkit-keyframes borderPulse {
  15% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
    opacity: 0;
  }
}
@-moz-keyframes borderPulse {
  15% {
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1.3);
    opacity: 0;
  }
}
@-o-keyframes borderPulse {
  15% {
    opacity: 1;
  }
  100% {
    -o-transform: scale(1.3);
    opacity: 0;
  }
}
@keyframes borderPulse {
  15% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@-moz-keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@-o-keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@-webkit-keyframes explode {
  100% {
    opacity: 0;
    -webkit-transform: scale(3) rotate(30deg) translateY(60px);
  }
}
@-moz-keyframes explode {
  100% {
    opacity: 0;
    -moz-transform: scale(3) rotate(30deg) translateY(60px);
  }
}
@-o-keyframes explode {
  100% {
    opacity: 0;
    -o-transform: scale(3) rotate(30deg) translateY(60px);
  }
}
@keyframes explode {
  100% {
    opacity: 0;
    -webkit-transform: scale(3) rotate(30deg) translateY(60px);
    -moz-transform: scale(3) rotate(30deg) translateY(60px);
    -ms-transform: scale(3) rotate(30deg) translateY(60px);
    transform: scale(3) rotate(30deg) translateY(60px);
  }
}
@-webkit-keyframes wave {
  5% {
    opacity: 0.6;
  }
  27% {
    -webkit-transform: scale(1.8);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes wave {
  5% {
    opacity: 0.6;
  }
  27% {
    -moz-transform: scale(1.8);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes wave {
  5% {
    opacity: 0.6;
  }
  27% {
    -o-transform: scale(1.8);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes wave {
  5% {
    opacity: 0.6;
  }
  27% {
    -webkit-transform: scale(1.8);
    -moz-transform: scale(1.8);
    -ms-transform: scale(1.8);
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes dropdownSlideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes dropdownSlideInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }
  100% {
    -moz-transform: translateY(0);
  }
}
@-o-keyframes dropdownSlideInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-20px);
  }
  100% {
    -o-transform: translateY(0);
  }
}
@keyframes dropdownSlideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*#region Colors*/
.themeprimary {
  color: var(--main-color) !important;
}

.themesecondary {
  color: #fb6e52 !important;
}

.themethirdcolor {
  color: #ffce55 !important;
}

.themefourthcolor {
  color: #a0d468 !important;
}

.themefifthcolor {
  color: #e75b8d !important;
}

.white {
  color: #fff !important;
}

.snow {
  color: #fbfbfb !important;
}

.whitesmoke {
  color: #f5f5f5 !important;
}

.seashell {
  color: #f3f3f3 !important;
}

.ivory {
  color: #eee !important;
}

.platinum {
  color: #e5e5e5 !important;
}

.lightgray {
  color: #d0d0d0 !important;
}

.gray {
  color: #ccc !important;
}

.darkgray {
  color: #999 !important;
}

.silver {
  color: #777 !important;
}

.sonic-silver {
  color: #737373 !important;
}

.storm-cloud {
  color: #666 !important;
}

.lightcarbon {
  color: #555 !important;
}

.carbon {
  color: #444 !important;
}

.slate-gray {
  color: #333 !important;
}

.darkcarbon {
  color: #262626 !important;
}

.blue {
  color: #5db2ff !important;
}

.info {
  color: #4993de !important;
}

.sky {
  color: #11a9cc !important;
}

.primary {
  color: var(--main-color) !important;
}

.azure {
  color: var(--main-color) !important;
}

.blueberry {
  color: #6f85bf !important;
}

.palegreen {
  color: #a0d468 !important;
}

.success {
  color: #5cb85c !important;
}

.green {
  color: #8cc474 !important;
}

.lightyellow {
  color: #f6d52e !important;
}

.yellow {
  color: #ffce55 !important;
}

.warning {
  color: #f4b400 !important;
}

.gold {
  color: #f9b256 !important;
}

.orange {
  color: #fb6e52 !important;
}

.lightred {
  color: #e46f61 !important;
}

.darkorange {
  color: #ed4e2a !important;
}

.red {
  color: #df5138 !important;
}

.pink {
  color: #e75b8d !important;
}

.darkpink {
  color: #cc324b !important;
}

.danger {
  color: #d73d32 !important;
}

.magenta {
  color: #bc5679 !important;
}

.purple {
  color: #7e3794 !important;
}

.maroon {
  color: #981b48 !important;
}

/*#endregion Colors*/
/*#region Background Colors*/
.bg-themeprimary {
  background-color: var(--main-color) !important;
}

.bg-themesecondary {
  background-color: #fb6e52 !important;
}

.bg-themethirdcolor {
  background-color: #ffce55 !important;
}

.bg-themefourthcolor {
  background-color: #a0d468 !important;
}

.bg-themefifthcolor {
  background-color: #e75b8d !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-snow {
  background-color: #fbfbfb !important;
}

.bg-whitesmoke {
  background-color: #f5f5f5 !important;
}

.bg-seashell {
  background-color: #f3f3f3 !important;
}

.bg-ivory {
  background-color: #eee !important;
}

.bg-platinum {
  background-color: #e5e5e5 !important;
}

.bg-lightgray {
  background-color: #d0d0d0 !important;
}

.bg-gray {
  background-color: #ccc !important;
}

.bg-darkgray {
  background-color: #999 !important;
}

.bg-silver {
  background-color: #777 !important;
}

.bg-sonic-silver {
  background-color: #737373 !important;
}

.bg-storm-cloud {
  background-color: #666 !important;
}

.bg-lightcarbon {
  background-color: #555 !important;
}

.bg-carbon {
  background-color: #444 !important;
}

.bg-slate-gray {
  background-color: #333 !important;
}

.bg-darkcarbon {
  background-color: #262626 !important;
}

.bg-blue {
  background-color: #5db2ff !important;
}

.bg-info {
  background-color: #57b5e3 !important;
}

.bg-sky {
  background-color: #11a9cc !important;
}

.bg-primary {
  background-color: var(--main-color) !important;
}

.bg-azure {
  background-color: var(--main-color) !important;
}

.bg-blueberry {
  background-color: #6f85bf !important;
}

.bg-palegreen {
  background-color: #a0d468 !important;
}

.bg-success {
  background-color: #53a93f !important;
}

.bg-green {
  background-color: #8cc474 !important;
}

.bg-lightyellow {
  background-color: #f6d52e !important;
}

.bg-yellow {
  background-color: #ffce55 !important;
}

.bg-warning {
  background-color: #f4b400 !important;
}

.bg-gold {
  background-color: #f9b256 !important;
}

.bg-orange {
  background-color: #fb6e52 !important;
}

.bg-lightred {
  background-color: #e46f61 !important;
}

.bg-darkorange {
  background-color: #ed4e2a !important;
}

.bg-red {
  background-color: #df5138 !important;
}

.bg-danger {
  background-color: #d73d32 !important;
}

.bg-pink {
  background-color: #e75b8d !important;
}

.bg-darkpink {
  background-color: #cc324b !important;
}

.bg-magenta {
  background-color: #bc5679 !important;
}

.bg-purple {
  background-color: #7e3794 !important;
}

.bg-maroon {
  background-color: #981b48 !important;
}

/*#endregion Background Colors*/
/*#region Before Colors*/
.before-themeprimary:before {
  background-color: var(--main-color) !important;
}

.before-themesecondary:before {
  background-color: #fb6e52 !important;
}

.before-themethirdcolor:before {
  background-color: #ffce55 !important;
}

.before-themefourthcolor:before {
  background-color: #a0d468 !important;
}

.before-themefifthcolor:before {
  background-color: #e75b8d !important;
}

.before-white:before {
  background-color: #fff !important;
}

.before-snow:before {
  background-color: #fbfbfb !important;
}

.before-whitesmoke:before {
  background-color: #f5f5f5 !important;
}

.before-seashell:before {
  background-color: #f3f3f3 !important;
}

.before-ivory:before {
  background-color: #eee !important;
}

.before-platinum:before {
  background-color: #e5e5e5 !important;
}

.before-lightgray:before {
  background-color: #d0d0d0 !important;
}

.before-gray:before {
  background-color: #ccc !important;
}

.before-darkgray:before {
  background-color: #999 !important;
}

.before-silver:before {
  background-color: #777 !important;
}

.before-sonic-silver:before {
  background-color: #737373 !important;
}

.before-storm-cloud:before {
  background-color: #666 !important;
}

.before-lightcarbon:before {
  background-color: #555 !important;
}

.before-carbon:before {
  background-color: #444 !important;
}

.before-slate-gray:before {
  background-color: #333 !important;
}

.before-darkcarbon:before {
  background-color: #262626 !important;
}

.before-blue:before {
  background-color: #5db2ff !important;
}

.before-info:before {
  background-color: #57b5e3 !important;
}

.before-sky:before {
  background-color: #11a9cc !important;
}

.before-primary:before {
  background-color: var(--main-color) !important;
}

.before-azure:before {
  background-color: var(--main-color) !important;
}

.before-blueberry:before {
  background-color: #6f85bf !important;
}

.before-palegreen:before {
  background-color: #a0d468 !important;
}

.before-success:before {
  background-color: #53a93f !important;
}

.before-green:before {
  background-color: #8cc474 !important;
}

.before-lightyellow:before {
  background-color: #f6d52e !important;
}

.before-yellow:before {
  background-color: #ffce55 !important;
}

.before-warning:before {
  background-color: #f4b400 !important;
}

.before-gold:before {
  background-color: #f9b256 !important;
}

.before-orange:before {
  background-color: #fb6e52 !important;
}

.before-lightred:before {
  background-color: #e46f61 !important;
}

.before-darkorange:before {
  background-color: #ed4e2a !important;
}

.before-red:before {
  background-color: #df5138 !important;
}

.before-danger:before {
  background-color: #d73d32 !important;
}

.before-pink:before {
  background-color: #e75b8d !important;
}

.before-darkpink:before {
  background-color: #cc324b !important;
}

.before-magenta:before {
  background-color: #bc5679 !important;
}

.before-purple:before {
  background-color: #7e3794 !important;
}

.before-maroon:before {
  background-color: #981b48 !important;
}

/*#endregion Before Colors*/
/*#region Bordered Colors*/
.bordered-solid {
  border-style: solid !important;
}

.bordered-dashed {
  border-style: dashed !important;
}

.bordered-dotted {
  border-style: dotted !important;
}

.bordered-double {
  border-style: double !important;
}

.bordered-1 {
  border: 1px solid #fff;
}

.bordered-2 {
  border: 2px solid #fff;
}

.bordered-3 {
  border: 3px solid #fff;
}

.bordered-4 {
  border: 4px solid #fff;
}

.bordered-5 {
  border: 5px solid #fff;
}

.bordered-bottom-1 {
  border-bottom: 1px solid #fff;
}

.bordered-bottom-2 {
  border-bottom: 2px solid #fff;
}

.bordered-bottom-3 {
  border-bottom: 3px solid #fff;
}

.bordered-bottom-4 {
  border-bottom: 4px solid #fff;
}

.bordered-bottom-5 {
  border-bottom: 5px solid #fff;
}

.bordered-top-1 {
  border-top: 1px solid #fff;
}

.bordered-top-2 {
  border-top: 2px solid #fff;
}

.bordered-top-3 {
  border-top: 3px solid #fff;
}

.bordered-top-4 {
  border-top: 4px solid #fff;
}

.bordered-top-5 {
  border-top: 5px solid #fff;
}

.bordered-left-1 {
  border-right: 1px solid #fff;
}

.bordered-left-2 {
  border-right: 2px solid #fff;
}

.bordered-left-3 {
  border-right: 3px solid #fff;
}

.bordered-left-4 {
  border-right: 4px solid #fff;
}

.bordered-left-5 {
  border-right: 5px solid #fff;
}

.bordered-right-1 {
  border-left: 1px solid #fff;
}

.bordered-right-2 {
  border-left: 2px solid #fff;
}

.bordered-right-3 {
  border-left: 3px solid #fff;
}

.bordered-right-4 {
  border-left: 4px solid #fff;
}

.bordered-right-5 {
  border-left: 5px solid #fff;
}

.bordered-themeprimary {
  border-color: var(--main-color) !important;
}

.bordered-themesecondary {
  border-color: #fb6e52 !important;
}

.bordered-themethirdcolor {
  border-color: #ffce55 !important;
}

.bordered-themefourthcolor {
  border-color: #a0d468 !important;
}

.bordered-themefifthcolor {
  border-color: #e75b8d !important;
}

.bordered-white {
  border-color: #fff !important;
}

.bordered-snow {
  border-color: #fbfbfb !important;
}

.bordered-whitesmoke {
  border-color: #f5f5f5 !important;
}

.bordered-seashell {
  border-color: #f3f3f3 !important;
}

.bordered-ivory {
  border-color: #eee !important;
}

.bordered-platinum {
  border-color: #e5e5e5 !important;
}

.bordered-lightgray {
  border-color: #d0d0d0 !important;
}

.bordered-gray {
  border-color: #ccc !important;
}

.bordered-darkgray {
  border-color: #999 !important;
}

.bordered-silver {
  border-color: #777 !important;
}

.bordered-sonic-silver {
  border-color: #737373 !important;
}

.bordered-storm-cloud {
  border-color: #666 !important;
}

.bordered-lightcarbon {
  border-color: #555 !important;
}

.bordered-carbon {
  border-color: #444 !important;
}

.bordered-slate-gray {
  border-color: #333 !important;
}

.bordered-darkcarbon {
  border-color: #262626 !important;
}

.bordered-blue {
  border-color: #5db2ff !important;
}

.bordered-info {
  border-color: #57b5e3 !important;
}

.bordered-sky {
  border-color: #11a9cc !important;
}

.bordered-primary {
  border-color: var(--main-color) !important;
}

.bordered-azure {
  border-color: var(--main-color) !important;
}

.bordered-blueberry {
  border-color: #6f85bf !important;
}

.bordered-palegreen {
  border-color: #a0d468 !important;
}

.bordered-success {
  border-color: #53a93f !important;
}

.bordered-green {
  border-color: #8cc474 !important;
}

.bordered-lightyellow {
  border-color: #f6d52e !important;
}

.bordered-yellow {
  border-color: #ffce55 !important;
}

.bordered-warning {
  border-color: #f4b400 !important;
}

.bordered-gold {
  border-color: #f9b256 !important;
}

.bordered-orange {
  border-color: #fb6e52 !important;
}

.bordered-lightred {
  border-color: #e46f61 !important;
}

.bordered-darkorange {
  border-color: #ed4e2a !important;
}

.bordered-red {
  border-color: #df5138 !important;
}

.bordered-danger {
  border-color: #d73d32 !important;
}

.bordered-pink {
  border-color: #e75b8d !important;
}

.bordered-darkpink {
  border-color: #cc324b !important;
}

.bordered-magenta {
  border-color: #bc5679 !important;
}

.bordered-purple {
  border-color: #7e3794 !important;
}

.bordered-maroon {
  border-color: #981b48 !important;
}

/*#region Paddings*/
.no-padding {
  padding: 0 !important;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.no-padding-top {
  padding-top: 0 !important;
}

.no-padding-left {
  padding-right: 0 !important;
}

.no-padding-right {
  padding-left: 0 !important;
}

.padding-5 {
  padding: 5px !important;
}

.padding-10 {
  padding: 10px !important;
}

.padding-20 {
  padding: 20px !important;
}

.padding-30 {
  padding: 30px !important;
}

.padding-40 {
  padding: 40px !important;
}

.padding-50 {
  padding: 50px !important;
}

.padding-left-5 {
  padding-right: 5px !important;
}

.padding-left-10 {
  padding-right: 10px !important;
}

.padding-left-20 {
  padding-right: 20px !important;
}

.padding-left-30 {
  padding-right: 30px !important;
}

.padding-left-40 {
  padding-right: 40px !important;
}

.padding-left-50 {
  padding-right: 50px !important;
}

.padding-top-5 {
  padding-top: 5px !important;
}

.padding-top-10 {
  padding-top: 10px !important;
}

.padding-top-20 {
  padding-top: 20px !important;
}

.padding-top-30 {
  padding-top: 30px !important;
}

.padding-top-40 {
  padding-top: 40px !important;
}

.padding-top-50 {
  padding-top: 50px !important;
}

.padding-right-5 {
  padding-left: 5px !important;
}

.padding-right-10 {
  padding-left: 10px !important;
}

.padding-right-20 {
  padding-left: 20px !important;
}

.padding-right-30 {
  padding-left: 30px !important;
}

.padding-right-40 {
  padding-left: 40px !important;
}

.padding-right-50 {
  padding-left: 50px !important;
}

.padding-bottom-5 {
  padding-bottom: 5px !important;
}

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

.padding-bottom-20 {
  padding-bottom: 20px !important;
}

.padding-bottom-30 {
  padding-bottom: 30px !important;
}

.padding-bottom-40 {
  padding-bottom: 40px !important;
}

.padding-bottom-50 {
  padding-bottom: 50px !important;
}

/*#endregion Paddings*/
/*#region Margins*/
.no-margin {
  margin: 0 !important;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.no-margin-top {
  margin-top: 0 !important;
}

.no-margin-left {
  margin-right: 0 !important;
}

.no-margin-right {
  margin-left: 0 !important;
}

.margin-5 {
  margin: 5px !important;
}

.margin-10 {
  margin: 10px !important;
}

.margin-20 {
  margin: 20px !important;
}

.margin-30 {
  margin: 30px !important;
}

.margin-40 {
  margin: 40px !important;
}

.margin-50 {
  margin: 50px !important;
}

.margin-left-5 {
  margin-right: 5px !important;
}

.margin-left-10 {
  margin-right: 10px !important;
}

.margin-left-20 {
  margin-right: 20px !important;
}

.margin-left-30 {
  margin-right: 30px !important;
}

.margin-left-40 {
  margin-right: 40px !important;
}

.margin-left-50 {
  margin-right: 50px !important;
}

.margin-top-5 {
  margin-top: 5px !important;
}

.margin-top-10 {
  margin-top: 10px !important;
}

.margin-top-20 {
  margin-top: 20px !important;
}

.margin-top-30 {
  margin-top: 30px !important;
}

.margin-top-40 {
  margin-top: 40px !important;
}

.margin-top-50 {
  margin-top: 50px !important;
}

.margin-right-5 {
  margin-left: 5px !important;
}

.margin-right-10 {
  margin-left: 10px !important;
}

.margin-right-20 {
  margin-left: 20px !important;
}

.margin-right-30 {
  margin-left: 30px !important;
}

.margin-right-40 {
  margin-left: 40px !important;
}

.margin-right-50 {
  margin-left: 50px !important;
}

.margin-bottom-5 {
  margin-bottom: 5px !important;
}

.margin-bottom-10 {
  margin-bottom: 10px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-bottom-40 {
  margin-bottom: 40px !important;
}

.margin-bottom-50 {
  margin-bottom: 50px !important;
}

/*#region Fonts*/
.font-10 {
  font-size: 10%;
}

.font-20 {
  font-size: 20%;
}

.font-30 {
  font-size: 30%;
}

.font-40 {
  font-size: 40%;
}

.font-50 {
  font-size: 50%;
}

.font-60 {
  font-size: 60%;
}

.font-70 {
  font-size: 70%;
}

.font-80 {
  font-size: 80%;
}

.font-90 {
  font-size: 90%;
}

.font-110 {
  font-size: 110%;
}

.font-120 {
  font-size: 120%;
}

.font-130 {
  font-size: 130%;
}

.font-140 {
  font-size: 140%;
}

.font-150 {
  font-size: 150%;
}

.font-160 {
  font-size: 160%;
}

.font-170 {
  font-size: 170%;
}

.font-180 {
  font-size: 180%;
}

.font-190 {
  font-size: 190%;
}

.font-200 {
  font-size: 200%;
}

/*Firefox Outline bug*/
button:focus,
a:focus {
  outline: none;
}

button::-moz-focus-inner,
a::-moz-focus-inner {
  border: 0;
}

.image-circular {
  -webkit-border-radius: 50% !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 50% !important;
  -moz-background-clip: padding !important;
  border-radius: 50% !important;
  background-clip: padding-box !important;
}

hr {
  border-top: 1px solid #eaeaea;
}

hr.wide {
  margin-left: -15px;
  margin-right: -15px;
}

.position-relative {
  position: relative;
}

.horizontal-space {
  max-height: 1px;
  min-height: 1px;
  overflow: hidden;
  margin: 6px 0;
}

.horizontal-space.space-xs {
  margin: 2px 0;
}

.horizontal-space.space-sm {
  margin: 4px 0;
}

.horizontal-space.space-lg {
  margin: 8px 0;
}

.horizontal-space.space-xl {
  margin: 10px 0;
}

.horizontal-space.space-xxl {
  margin: 12px 0;
}

.vertical-space {
  max-width: 1px;
  min-width: 1px;
  overflow: hidden;
  margin: 0 12px;
}

html {
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
}

body {
  padding-bottom: 0;
  min-height: 100%;
  min-width: 288px;
  font-family: "Noto Kufi Arabic", "Roboto", open sans, sans-serif !important;
  font-size: 13px;
  color: #444;
  max-width: 2000px;
  width: 100%;
  margin: 0 auto 10px;
  background-size: cover !important;
  padding: 0 25px;
  background: #fafafa;
}
@media screen and (min-width: 750px) {
  body .main-container.with-chat {
    padding-left: 50px;
    /*  &.main-cintainer-without-chat{
        padding-left: 0;
      }*/
  }
}
body:before {
  position: absolute;
  content: "";
  background: linear-gradient(180deg, #0084d7 0%, #00c9f2 75%, #00c9f2 100%);
  top: 0;
  width: 100%;
  left: 0;
  min-height: 1000px;
  z-index: -1;
}
body:after {
  position: absolute;
  content: "";
  top: 950px;
  width: 100%;
  left: 0;
  min-height: 100px;
  z-index: -1;
  background: transparent;
  -webkit-clip-path: ellipse(50% 40% at 50% 51%);
}

#particles {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #e6e9ec;
  z-index: -1;
  background-size: cover;
}

#particles.mobile-bg {
  background-image: url("../../img/mobile_bg.jpg");
  background-repeat: no-repeat;
  background-size: initial;
}

#announcements {
  background: #fafafa;
}

/*body:before {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background-color: #eee;
}*/
/*#region Typography */
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  color: #444;
}

h1.block,
h2.block,
h3.block,
h4.block,
h5.block,
h6.block {
  padding-top: 10px;
  padding-bottom: 10px;
}

h1 .label,
h2 .label,
h3 .label,
h4 .label,
h5 .label,
h6 .label {
  font-size: 75%;
}

h1.row-title,
h2.row-title,
h3.row-title,
h4.row-title,
h5.row-title,
h6.row-title {
  line-height: inherit;
  margin: 10px 0;
  padding: 9px 10px 9px 8px;
  display: inline-block;
  color: #444;
  font-weight: 400;
  background-color: #fff;
  position: relative;
  -webkit-border-radius: 0 2px 2px 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 2px 2px 0;
  -moz-background-clip: padding;
  border-radius: 0 2px 2px 0;
  background-clip: padding-box;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

h1.row-title:before,
h2.row-title:before,
h3.row-title:before,
h4.row-title:before,
h5.row-title:before,
h6.row-title:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -4px;
  width: 4px;
  max-width: 4px;
  overflow: hidden;
  background-color: var(--main-color);
}

h1.row-title .fa,
h2.row-title .fa,
h3.row-title .fa,
h4.row-title .fa,
h5.row-title .fa,
h6.row-title .fa,
h1.row-title .glyphicon,
h2.row-title .glyphicon,
h3.row-title .glyphicon,
h4.row-title .glyphicon,
h5.row-title .glyphicon,
h6.row-title .glyphicon,
h1.row-title .typcn,
h2.row-title .typcn,
h3.row-title .typcn,
h4.row-title .typcn,
h5.row-title .typcn,
h6.row-title .typcn,
h1.row-title [class*=wi-],
h2.row-title [class*=wi-],
h3.row-title [class*=wi-],
h4.row-title [class*=wi-],
h5.row-title [class*=wi-],
h6.row-title [class*=wi-] {
  margin-left: 5px;
  line-height: inherit;
  font-size: 17px;
}

h1 {
  font-size: 32px;
}

h1.smaller {
  font-size: 31px;
}

h1.bigger {
  font-size: 33px;
}

h1.block {
  margin-bottom: 16px;
}

h2 {
  font-size: 26px;
}

h2.smaller {
  font-size: 25px;
}

h2.bigger {
  font-size: 27px;
}

h2.block {
  margin-bottom: 16px;
}

h3 {
  font-size: 22px;
}

h3.smaller {
  font-size: 21px;
}

h3.bigger {
  font-size: 23px;
}

h3.block {
  margin-bottom: 16px;
}

h4 {
  font-size: 18px;
}

h4.smaller {
  font-size: 17px;
}

h4.bigger {
  font-size: 19px;
}

h4.block {
  margin-bottom: 16px;
}

h5 {
  font-size: 15px;
}

h5.smaller {
  font-size: 14px;
}

h5.bigger {
  font-size: 16px;
}

h5.block {
  margin-bottom: 16px;
}

h6 {
  font-size: 13px;
}

h6.smaller {
  font-size: 12px;
}

h6.bigger {
  font-size: 14px;
}

h6.block {
  margin-bottom: 16px;
}

.text-align-center {
  text-align: center !important;
}

.text-align-left {
  text-align: right !important;
}

.text-align-right {
  text-align: left !important;
}

.text-align-justify {
  text-align: justify !important;
}

.block-center {
  margin: 0 auto;
}

.uppercase {
  text-transform: uppercase;
}

p {
  line-height: 22px;
}

a:focus,
a:active {
  text-decoration: none;
}

/*--------Page Components--------*/
.main-container {
  position: static;
  padding: 0;
}

.main-container > .page-container {
  margin: 0;
  position: relative;
}

/*#region Sidebar*/
@media only screen and (max-width: 530px) {
  .actions .btn {
    width: 50%;
    margin-bottom: 1px !important;
  }

  .actions .btn-group .btn-group {
    width: 50%;
  }

  .actions .btn-group .btn-group .btn {
    width: 100%;
  }
}
/*#region Page Content*/
.page-content {
  display: block;
  margin-top: 0;
  min-height: 100%;
  padding: 0;
}

/*#region Breadcrumbs*/
.page-breadcrumbs {
  position: relative;
  min-height: 40px;
  line-height: 39px;
  padding: 0;
  display: block;
  z-index: 1;
}

.page-breadcrumbs.breadcrumbs-fixed {
  position: fixed;
  left: 0;
  right: 224px;
  top: 45px;
  z-index: 999;
}

.page-breadcrumbs.breadcrumbs-fixed + .page-header {
  margin-top: 40px;
}

.breadcrumb {
  background-color: transparent;
  display: inline-block;
  line-height: 24px;
  margin: 0 22px 0 12px;
  padding: 0;
  font-size: 13px;
  color: #333;
  border-radius: 0;
}

.breadcrumb > li,
.breadcrumb > li.active {
  color: #777;
  -webkit-text-shadow: none;
  text-shadow: none;
}

.breadcrumb > li + li:before {
  color: #999;
}

.breadcrumb > li > .divider {
  padding: 0 4px;
}

.breadcrumb > li > a {
  display: inline-block;
  color: #519ce2;
}

.breadcrumb > li:first-child > a {
  padding-right: 4px;
}

.breadcrumb > li > i {
  margin-right: 4px;
  margin-left: 2px;
  font-size: 20px;
  position: relative;
  top: 2px;
}

.breadcrumb .expand-icon {
  height: 22px;
  padding: 0;
  margin: 0;
  position: relative;
  top: 1px;
  font-size: 14px;
  color: #b2b6bf;
}

/*#region page-header*/
.page-header {
  position: relative;
  margin: 0;
  padding-bottom: 1px;
  padding-right: 12px;
  background: #fff;
  z-index: 0;
  min-height: 40px;
  border-bottom: 1px solid #e5e5e5;
  height: 40px;
}

.page-header .header-title {
  display: inline-block;
  position: relative;
  height: 40px;
}

.page-header .header-title h1 {
  padding: 0;
  margin: 0 4px;
  font-size: 17px;
  font-weight: lighter;
  color: #737373;
  line-height: 37px;
  display: inline-block;
}

.page-header .header-title h1 small {
  margin: 0 1px;
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 300;
  color: #888;
}

.page-header .header-buttons {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}

.page-header .header-buttons a {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  z-index: 1029;
  height: 40px;
  width: 36px;
  margin-left: 5px;
  padding: 8px 10px;
  color: #dfdfdf;
  -webkit-transition: all 0.218s ease;
  -moz-transition: all 0.218s ease;
  -o-transition: all 0.218s ease;
  transition: all 0.218s ease;
  float: left;
}

.page-header .header-buttons a:before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  left: 0;
  height: 4px;
  max-height: 4px;
  overflow: hidden;
  background-color: var(--main-color);
}

.page-header .header-buttons a:hover {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  color: var(--main-color);
}

.page-header .header-buttons a.active {
  color: var(--main-color);
}

.page-header .header-buttons a i {
  font-size: 17px;
  font-style: normal;
  font-weight: normal;
  line-height: 27px;
}

.page-header .header-buttons a.fullscreen:before {
  background-color: #fb6e52;
}

.page-header .header-buttons a.fullscreen:hover,
.page-header .header-buttons a.fullscreen.active {
  color: #fb6e52;
}

.page-header .header-buttons a.refresh:before {
  background-color: #ffce55;
}

.page-header .header-buttons a.refresh:hover,
.page-header .header-buttons a.refresh.active {
  color: #ffce55;
}

.page-header .header-buttons a.sidebar-toggler:before {
  background-color: var(--main-color);
}

.page-header .header-buttons a.sidebar-toggler:hover,
.page-header .header-buttons a.sidebar-toggler.active {
  color: var(--main-color);
}

.page-header.mail-header {
  border-bottom: 1px solid #eee;
}

.page-header.mail-header .header-buttons a:before {
  display: none;
}

.page-header.mail-header .header-buttons a:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.page-header.page-header-fixed {
  position: fixed;
  left: 0;
  right: 224px;
  top: 85px;
  z-index: 998;
  margin-top: 0 !important;
}

.page-header.page-header-fixed + .page-body {
  margin-top: 80px;
}

@media only screen and (max-width: 520px) {
  .header-title h1 small {
    display: none;
  }
}
/*#endregion page-header*/
.page-body {
  padding: 0 20px;
  /*background: $main_bg;*/
}

/*--------Elements--------*/
/*#region Widget*/
.widget {
  padding: 0;
  -webkit-box-shadow: 1px 0 -1px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 1px 0 -1px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 -1px 0px rgba(0, 0, 0, 0.25);
  margin: 0 0 30px 0;
}

.widget.collapsed .widget-body {
  display: none;
}

.widget.collapsed.radius-bordered .widget-header {
  -webkit-border-radius: 3px 3px 3px 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 3px 3px 3px;
  -moz-background-clip: padding;
  border-radius: 3px 3px 3px 3px;
  background-clip: padding-box;
}

.widget.no-header .widget-header {
  display: none;
}

.widget.no-header.radius-bordered .widget-body {
  -webkit-border-radius: 3px 3px 3px 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 3px 3px 3px;
  -moz-background-clip: padding;
  border-radius: 3px 3px 3px 3px;
  background-clip: padding-box;
}

.widget.maximized {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  margin: 0;
  overflow: auto;
}

.widget.maximized .widget-body {
  padding: 12px 0;
}

.widget.transparent .widget-header,
.widget.transparent .widget-body {
  background-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.widget.transparent .widget-header {
  border-bottom: 1px solid #ccc;
}

.widget.bordered-top {
  border-top: 3px solid #fff;
}

.widget.bordered-bottom {
  border-bottom: 3px solid #fff;
}

.widget.bordered-left {
  border-right: 3px solid #fff;
}

.widget.bordered-right {
  border-left: 3px solid #fff;
}

.widget.radius-bordered .widget-header {
  -webkit-border-radius: 3px 3px 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 3px 0 0;
  -moz-background-clip: padding;
  border-radius: 3px 3px 0 0;
  background-clip: padding-box;
}

.widget.radius-bordered .widget-body {
  -webkit-border-radius: 0 0 3px 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 0 3px 3px;
  -moz-background-clip: padding;
  border-radius: 0 0 3px 3px;
  background-clip: padding-box;
}

.widget.flat .widget-body,
.widget.flat .widget-header {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.widget.lightshadow .widget-body,
.widget.lightshadow .widget-header {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.widget:hover .compact {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.widget:hover .compact i {
  color: var(--main-color);
}

.widget-header {
  position: relative;
  min-height: 35px;
  background: #fff;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  color: #444;
  padding-right: 12px;
  text-align: left;
  /*#region Bordered Header */
  /*#endregion Bordered Header*/
}

.widget-header .widget-icon {
  display: block;
  width: 30px;
  height: 32px;
  position: relative;
  float: right;
  font-size: 111%;
  line-height: 32px;
  text-align: center;
  margin-right: -10px;
}

.widget-header > .widget-caption {
  line-height: 18px;
  padding: 0;
  margin: 0;
  float: right;
  text-align: right;
  font-weight: 400 !important;
  font-size: 13px;
  padding-top: 3px;
}

.widget-header.lined {
  border: 0;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  padding-right: 2%;
}

.widget-header.lined:before {
  content: "";
  position: absolute;
  display: block;
  width: 96%;
  bottom: 0;
  top: 35px;
  height: 1px;
  right: 2%;
  z-index: 1;
  border-bottom: 1px solid #e5e5e5;
}

.widget-header.lined .widget-buttons {
  padding-left: 2%;
}

.widget-header.lined + .widget-body {
  padding-right: 2%;
  padding-left: 2%;
}

.widget-header.separated {
  margin-bottom: 5px;
}

.widget-header[class*=bg-] {
  border: 0;
}

.widget-header[class*=bg-] .widget-caption,
.widget-header[class*=bg-] i {
  color: #fff;
}

.widget-header.bordered-left {
  border-right: 3px solid #fff;
}

.widget-header.bordered-right {
  border-left: 3px solid #fff;
}

.widget-header.bordered-top {
  border-top: 3px solid #fff;
}

.widget-header.bordered-bottom {
  border-bottom: 3px solid #fff;
}

.widget-header.header-large {
  min-height: 49px;
  padding-right: 18px;
}

.widget-header.header-large h5 {
  line-height: 48px;
  font-size: 16px;
}

.widget-header.header-large > .widget-buttons {
  line-height: 48px;
  height: 48px;
}

.widget-header.header-large > .widget-buttons a {
  min-width: 26px;
}

.widget-header.header-large > .widget-buttons a i {
  font-size: 20px;
}

.widget-header.header-small {
  min-height: 29px;
  padding-right: 10px;
}

.widget-header.header-small h5 {
  line-height: 28px;
  font-size: 12px;
}

.widget-header.header-small > .widget-buttons {
  line-height: 29px;
  height: 29px;
}

.widget-header.header-small > .widget-buttons a {
  min-width: 16px;
  height: 16px;
}

.widget-header.header-small > .widget-buttons a i {
  font-size: 14px;
}

.widget-buttons {
  display: inline-block;
  padding: 0 5px;
  line-height: 34px;
  position: relative;
  text-align: right;
  height: 36px;
}

.widget-buttons.buttons-bordered {
  border-right: 1px solid #e5e5e5;
}

.widget-buttons.compact {
  margin-top: 4px;
  background-color: #f5f5f5;
  line-height: 27px;
  -webkit-transition: background-color 0.218s ease;
  -moz-transition: background-color 0.218s ease;
  -o-transition: background-color 0.218s ease;
  transition: background-color 0.218s ease;
  -webkit-transition: -webkit-box-shadow 0.218s ease;
  -moz-transition: -moz-box-shadow 0.218s ease;
  -o-transition: box-shadow 0.218s ease;
  transition: box-shadow 0.218s ease;
  -webkit-transition: color 0.318s ease;
  -moz-transition: color 0.318s ease;
  -o-transition: color 0.318s ease;
  transition: color 0.318s ease;
  height: 27px;
}

.widget-buttons.compact:hover {
  background-color: var(--main-color);
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.widget-buttons.compact:hover i {
  color: #fff;
}

.widget-buttons.compact:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 4px;
  max-width: 4px;
  overflow: hidden;
  background-color: var(--main-color);
}

.widget-buttons.compact a {
  min-width: 14px;
  line-height: 14px;
}

.widget-buttons.compact i {
  color: #ccc;
  font-size: 14px;
}

.widget-buttons.no-padding {
  padding: 0;
}

.widget-buttons.padding-5 {
  padding: 0 5px;
}

.widget-buttons.no-border:before {
  display: none;
}

.widget-buttons label {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
  line-height: 6px;
}

.widget-buttons > a {
  font-size: 14px;
  margin: 0 1px;
  display: inline-block;
  padding: 0;
  line-height: 24px;
  min-width: 20px;
  text-align: center;
}

.widget-buttons > a:hover {
  text-decoration: none;
}

.widget-buttons > a i {
  vertical-align: middle;
}

.widget-buttons > [data-toggle] > .fa {
  margin-left: 0;
}

.widget-buttons > [data-toggle]:hover {
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

.widget-buttons > [data-toggle]:focus {
  text-decoration: none;
}

.widget-buttons > [data-toggle=dispose] {
  color: #777;
  font-size: 14px;
}

.widget-buttons > [data-toggle=maximize] {
  color: #777;
  font-size: 14px;
}

.widget-buttons > [data-toggle=collapse] {
  color: #777;
  font-size: 14px;
}

.widget-buttons > [data-toggle=refresh] {
  color: #777;
  font-size: 14px;
}

.widget-buttons > [data-toggle=config] {
  color: #777;
  font-size: 14px;
}

.widget-buttons .progress {
  vertical-align: middle;
  display: inline-block;
  margin: 0;
  min-width: 100px;
  margin-top: -3px;
}

.widget-buttons .btn-group {
  margin-top: -2px;
}

.widget-buttons .btn-group .dropdown-menu {
  left: 0;
  right: auto;
}

.widget-buttons .badge {
  margin-top: -2px;
}

.widget-buttons .label {
  padding: 5px 6px 5px 6px;
}

.widget-buttons .pagination,
.widget-buttons .pager {
  float: left;
  margin: 5px 2px 1px;
}

.widget-buttons .btn {
  margin-top: -2px;
}

.widget-body {
  background-color: #fff;
  padding: 12px;
}

.widget-body.bordered-left {
  border-right: 3px solid #fff;
}

.widget-body.bordered-right {
  border-left: 3px solid #fff;
}

.widget-body.bordered-bottom {
  border-bottom: 3px solid #fff;
}

.widget-body.bordered-top {
  border-top: 3px solid #fff;
}

.widget-body[class*=bg-] {
  color: #fff;
}

.widget-body.no-padding {
  padding: 0;
}

.widget-body.no-padding .accordion {
  border: 0;
}

.widget-body.no-padding .dataTables_filter label {
  margin: 10px;
}

.widget-body.no-padding .dataTables_length {
  top: 10px;
  left: 10px;
}

.widget-body.no-padding .DTTT.btn-group {
  left: 80px;
  top: 10px;
}

.widget-body .accordion.panel-group {
  border-top-width: 1px !important;
}

.widget-body > table {
  margin-bottom: 0;
}

.widget-body hr.wide {
  margin-right: -12px;
  margin-left: -12px;
}

/*#region DataBoxes*/
.databox-container {
  text-align: center;
  font-size: 0;
}

.databox {
  display: inline-block;
  width: 100%;
  height: 65px;
  padding: 0;
  font-size: 0;
  margin-bottom: 30px;
  vertical-align: top;
  min-width: 130px;
}

.databox .databox-icon {
  margin: 0;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.databox .databox-icon > .fa,
.databox .databox-icon .typcn,
.databox .databox-icon .glyphicon,
.databox .databox-icon .wi {
  display: inline-block;
  margin: 0;
  text-align: center;
  position: relative;
  margin-top: 3px;
}

.databox .databox-icon > .fa:before,
.databox .databox-icon .typcn:before,
.databox .databox-icon .glyphicon:before,
.databox .databox-icon .wi:before {
  font-size: 40px;
  display: block;
  text-align: center;
}

.databox .databox-sparkline {
  padding-top: 0;
  margin: 0 auto;
  display: inline-block;
  vertical-align: bottom;
  width: 100%;
  text-align: center;
  font-size: 24px;
}

.databox .databox-piechart {
  padding-top: 0;
  margin: 0 auto;
  display: inline-block;
  vertical-align: bottom;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 300;
}

.databox .databox-header {
  display: block;
  font-size: 18px;
  font-family: "Roboto", Arial;
  font-weight: 400;
  margin: 8px 5px;
  position: relative;
}

.databox .databox-header i {
  margin-left: 5px;
}

.databox .databox-number {
  display: block;
  font-size: 25px;
  line-height: 28px;
  margin: 2px;
  position: relative;
  font-family: "Roboto", Arial;
}

.databox .databox-number i {
  margin-left: 5px;
}

.databox .databox-number.number-xs {
  font-size: 11px;
}

.databox .databox-number.number-sm {
  font-size: 14px;
}

.databox .databox-number.number-lg {
  font-size: 20px;
}

.databox .databox-number.number-xlg {
  font-size: 23px;
}

.databox .databox-number.number-xxlg {
  font-size: 30px;
}

.databox .databox-title {
  display: block;
  font-size: 16px;
  font-weight: 300;
  margin: 2px;
  position: relative;
}

.databox .databox-title i {
  margin-left: 5px;
  font-size: 13px;
}

.databox .databox-text {
  display: block;
  font-size: 11px;
  margin: 4px 0 2px;
  position: relative;
}

.databox .databox-text i {
  margin-left: 5px;
  font-size: 13px;
}

.databox .databox-inlinetext {
  font-size: 11px;
  margin: 2px;
  position: relative;
}

.databox .databox-inlinetext i {
  margin-left: 5px;
  font-size: 13px;
}

.databox .databox-stat {
  display: inline-block;
  position: absolute;
  left: 7px;
  top: 7px;
  padding: 2px 5px;
}

.databox .databox-stat.stat-left {
  right: 7px;
  left: auto;
}

.databox .databox-stat .stat-text {
  display: inline-block;
  font-size: 13px;
  padding-left: 5px;
  font-weight: 500;
}

.databox .databox-stat .stat-icon {
  display: inline-block;
  font-size: 13px;
}

.databox .databox-stat .stat-icon.icon-lg {
  font-size: 16px;
}

.databox .databox-stat .stat-icon.icon-xlg {
  font-size: 18px;
}

.databox .databox-stat.radius-bordered {
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}

.databox .databox-stat[class*=bg-] {
  color: #fff;
}

.databox .databox-state {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 24px;
  width: 24px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  background-color: #e5e5e5;
  text-align: center;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border: 2px solid #fff;
}

.databox .databox-state i {
  font-size: 13px;
  color: #fff;
  line-height: 20px;
}

.databox .databox-row {
  width: 100%;
  margin: 0;
  position: relative;
}

.databox .databox-row[class*=bg-] {
  color: #fff;
}

.databox .databox-row.bordered-bottom {
  border-bottom: 1px solid #fff;
}

.databox .databox-row.bordered-top {
  border-top: 1px solid #fff;
}

.databox .databox-row.bordered-left {
  border-right: 1px solid #fff;
}

.databox .databox-row.bordered-right {
  border-left: 1px solid #fff;
}

.databox .databox-row.bordered-thick {
  border-width: 2px;
}

.databox .databox-row.row-1 {
  height: 8.33%;
}

.databox .databox-row.row-2 {
  height: 16.66%;
}

.databox .databox-row.row-3 {
  height: 25%;
}

.databox .databox-row.row-4 {
  height: 33.33%;
}

.databox .databox-row.row-5 {
  height: 41.66%;
}

.databox .databox-row.row-6 {
  height: 50%;
}

.databox .databox-row.row-7 {
  height: 58.33%;
}

.databox .databox-row.row-8 {
  height: 66.66%;
}

.databox .databox-row.row-9 {
  height: 75%;
}

.databox .databox-row.row-10 {
  height: 83.33%;
}

.databox .databox-row.row-11 {
  height: 91.66%;
}

.databox .databox-row.row-12 {
  height: 100%;
}

.databox .databox-cell {
  height: 100%;
  margin: 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding: 0 10px;
}

.databox .databox-cell[class*=bg-] {
  color: #fff;
}

.databox .databox-cell.bordered-bottom {
  border-bottom: 1px solid #fff;
}

.databox .databox-cell.bordered-top {
  border-top: 1px solid #fff;
}

.databox .databox-cell.bordered-left {
  border-right: 1px solid #fff;
}

.databox .databox-cell.bordered-right {
  border-left: 1px solid #fff;
}

.databox .databox-cell.bordered-thick {
  border-width: 2px;
}

.databox .databox-cell.cell-1 {
  width: 8.33%;
}

.databox .databox-cell.cell-2 {
  width: 16.66%;
}

.databox .databox-cell.cell-3 {
  width: 25%;
}

.databox .databox-cell.cell-4 {
  width: 33.33%;
}

.databox .databox-cell.cell-5 {
  width: 41.66%;
}

.databox .databox-cell.cell-6 {
  width: 50%;
}

.databox .databox-cell.cell-7 {
  width: 58.33%;
}

.databox .databox-cell.cell-8 {
  width: 66.66%;
}

.databox .databox-cell.cell-9 {
  width: 75%;
}

.databox .databox-cell.cell-10 {
  width: 83.33%;
}

.databox .databox-cell.cell-11 {
  width: 91.66%;
}

.databox .databox-cell.cell-12 {
  width: 100%;
}

.databox.databox-inverted .databox-left {
  -lh-property: 0;
  width: -webkit-calc(100% - 65px);
  width: -moz-calc(100% - 65px);
  width: calc(100% - 65px);
}

.databox.databox-inverted .databox-right {
  width: 65px;
}

.databox.databox-transparent .databox-left {
  background-color: transparent !important;
}

.databox.databox-transparent .databox-right {
  background-color: transparent !important;
}

.databox .databox-left {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin: 0;
  width: 65px;
  height: 65px;
  padding: 10px;
  color: var(--main-color);
}

.databox .databox-left[class*=bg-] {
  color: #fff;
}

.databox .databox-right {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 0;
  -lh-property: 0;
  width: -webkit-calc(100% - 65px);
  width: -moz-calc(100% - 65px);
  width: calc(100% - 65px);
  height: 65px;
  color: #555;
  padding: 5px 10px;
}

.databox .databox-right.bordered {
  border-right: 1px solid #fff;
}

.databox .databox-right.bordered-thick {
  border-right: 3px solid #fff;
}

.databox .databox-right[class*=bg-] {
  color: #fff;
}

.databox.databox-shadowed {
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.databox.radius-bordered {
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}

.databox.radius-bordered .databox-left {
  -webkit-border-radius: 3px 0 0 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 0 0 3px;
  -moz-background-clip: padding;
  border-radius: 3px 0 0 3px;
  background-clip: padding-box;
}

.databox.radius-bordered .databox-right {
  -webkit-border-radius: 0 3px 3px 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 3px 3px 0;
  -moz-background-clip: padding;
  border-radius: 0 3px 3px 0;
  background-clip: padding-box;
}

.databox.radius-bordered .databox-right .databox-row:first-child {
  -webkit-border-radius: 0 3px 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 3px 0 0;
  -moz-background-clip: padding;
  border-radius: 0 3px 0 0;
  background-clip: padding-box;
}

.databox.radius-bordered .databox-right .databox-row:last-child {
  -webkit-border-radius: 0 0 3px 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 0 3px 0;
  -moz-background-clip: padding;
  border-radius: 0 0 3px 0;
  background-clip: padding-box;
}

.databox.databox-graded {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(right, #ddd, #fff);
  background-image: -moz-linear-gradient(right, #ddd, #fff);
  background-image: -o-linear-gradient(right, #ddd, #fff);
  background-image: linear-gradient(to left, #ddd, #fff);
}

.databox.databox-halved .databox-left {
  width: 50% !important;
}

.databox.databox-halved .databox-right {
  width: 50% !important;
}

.databox.databox-lg {
  height: 80px;
}

.databox.databox-lg .databox-icon > .fa:before,
.databox.databox-lg .databox-icon .typcn:before,
.databox.databox-lg .databox-icon .glyphicon:before,
.databox.databox-lg .databox-icon .wi:before {
  font-size: 48px;
  padding: 6px 4px 7px;
}

.databox.databox-lg .databox-sparkline {
  margin: 13px auto;
}

.databox.databox-lg .databox-number {
  font-size: 20px;
  margin: 4px 0 6px;
}

.databox.databox-lg .databox-left {
  width: 80px;
  height: 80px;
}

.databox.databox-lg .databox-right {
  -lh-property: 0;
  width: -webkit-calc(100% - 80px);
  width: -moz-calc(100% - 80px);
  width: calc(100% - 80px);
  height: 80px;
  padding: 10px 15px;
}

.databox.databox-lg.databox-inverted .databox-left {
  -lh-property: 0;
  width: -webkit-calc(100% - 80px);
  width: -moz-calc(100% - 80px);
  width: calc(100% - 80px);
}

.databox.databox-lg.databox-inverted .databox-right {
  width: 80px;
}

.databox.databox-xlg {
  height: 170px;
}

.databox.databox-xlg .databox-icon > .fa:before,
.databox.databox-xlg .databox-icon .typcn:before,
.databox.databox-xlg .databox-icon .glyphicon:before {
  padding: 6px 4px 7px;
}

.databox.databox-xlg .databox-icon .wi:before {
  font-size: 55px !important;
}

.databox.databox-xlg .databox-left {
  width: 170px;
  height: 170px;
}

.databox.databox-xlg .databox-right {
  -lh-property: 0;
  width: -webkit-calc(100% - 170px);
  width: -moz-calc(100% - 170px);
  width: calc(100% - 170px);
  height: 170px;
}

.databox.databox-xlg.databox-inverted .databox-left {
  -lh-property: 0;
  width: -webkit-calc(100% - 170px);
  width: -moz-calc(100% - 170px);
  width: calc(100% - 170px);
}

.databox.databox-xlg.databox-inverted .databox-right {
  width: 170px;
}

.databox.databox-xxlg {
  height: 250px;
}

.databox.databox-xxlg .databox-icon > .fa:before,
.databox.databox-xxlg .databox-icon .typcn:before,
.databox.databox-xxlg .databox-icon .glyphicon:before,
.databox.databox-xxlg .databox-icon .wi:before {
  font-size: 200px;
  padding: 6px 4px 7px;
}

.databox.databox-xxlg .databox-left {
  width: 250px;
  height: 250px;
}

.databox.databox-xxlg .databox-right {
  -lh-property: 0;
  width: -webkit-calc(100% - 250px);
  width: -moz-calc(100% - 250px);
  width: calc(100% - 250px);
  height: 250px;
}

.databox.databox-xxlg.databox-inverted .databox-left {
  -lh-property: 0;
  width: -webkit-calc(100% - 250px);
  width: -moz-calc(100% - 250px);
  width: calc(100% - 250px);
}

.databox.databox-xxlg.databox-inverted .databox-right {
  width: 250px;
}

.databox.databox-vertical {
  width: 100%;
  height: 100px;
}

.databox.databox-vertical .databox-top {
  position: relative;
  width: 100%;
  height: 50px;
  display: inline-block;
  text-align: center;
  margin: 0;
  padding: 5px;
  color: var(--main-color);
}

.databox.databox-vertical .databox-top[class*=bg-] {
  color: #fff;
}

.databox.databox-vertical .databox-bottom {
  position: relative;
  width: 100%;
  height: 50px;
  display: inline-block;
  margin: 0;
  color: #555;
  padding: 5px 10px;
}

.databox.databox-vertical .databox-bottom.bordered {
  border-top: 1px solid #fff;
}

.databox.databox-vertical .databox-bottom.bordered-thick {
  border-top: 3px solid #fff;
}

.databox.databox-vertical .databox-bottom[class*=bg-] {
  color: #fff;
}

.databox.databox-vertical .databox-icon > .fa:before,
.databox.databox-vertical .databox-icon .typcn:before,
.databox.databox-vertical .databox-icon .glyphicon:before,
.databox.databox-vertical .databox-icon .wi:before {
  font-size: 38px;
}

.databox.databox-vertical.radius-bordered {
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}

.databox.databox-vertical.radius-bordered .databox-top {
  -webkit-border-radius: 3px 3px 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 3px 0 0;
  -moz-background-clip: padding;
  border-radius: 3px 3px 0 0;
  background-clip: padding-box;
}

.databox.databox-vertical.radius-bordered .databox-top .databox-row:first-child .databox-cell:first-child {
  -webkit-border-radius: 3px 0 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 0 0 0;
  -moz-background-clip: padding;
  border-radius: 3px 0 0 0;
  background-clip: padding-box;
}

.databox.databox-vertical.radius-bordered .databox-top .databox-row:first-child .databox-cell:last-child {
  -webkit-border-radius: 0 3px 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 3px 0 0;
  -moz-background-clip: padding;
  border-radius: 0 3px 0 0;
  background-clip: padding-box;
}

.databox.databox-vertical.radius-bordered .databox-top img {
  -webkit-border-radius: 3px 3px 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 3px 0 0;
  -moz-background-clip: padding;
  border-radius: 3px 3px 0 0;
  background-clip: padding-box;
}

.databox.databox-vertical.radius-bordered .databox-bottom {
  -webkit-border-radius: 0 0 3px 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 0 3px 3px;
  -moz-background-clip: padding;
  border-radius: 0 0 3px 3px;
  background-clip: padding-box;
}

.databox.databox-vertical.radius-bordered .databox-bottom .databox-row:last-child .databox-cell:first-child {
  -webkit-border-radius: 0 0 0 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 0 0 3px;
  -moz-background-clip: padding;
  border-radius: 0 0 0 3px;
  background-clip: padding-box;
}

.databox.databox-vertical.radius-bordered .databox-bottom .databox-row:last-child .databox-cell:last-child {
  -webkit-border-radius: 0 0 3px 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 0 3px 0;
  -moz-background-clip: padding;
  border-radius: 0 0 3px 0;
  background-clip: padding-box;
}

.databox.databox-vertical.radius-bordered .databox-bottom img {
  -webkit-border-radius: 0 0 3px 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 0 3px 3px;
  -moz-background-clip: padding;
  border-radius: 0 0 3px 3px;
  background-clip: padding-box;
}

.databox.databox-vertical.databox-graded {
  background: #fff;
}

.databox.databox-vertical.databox-halved .databox-top {
  height: 50%;
}

.databox.databox-vertical.databox-halved .databox-bottom {
  height: 50%;
}

.databox.databox-vertical.databox-lg {
  height: 150px;
  width: 100%;
}

.databox.databox-vertical.databox-lg .databox-number {
  font-size: 17px;
  margin: 2px;
}

.databox.databox-vertical.databox-lg .databox-icon > .fa:before,
.databox.databox-vertical.databox-lg .databox-icon .typcn:before,
.databox.databox-vertical.databox-lg .databox-icon .glyphicon:before {
  font-size: 38px !important;
  padding: 0;
}

.databox.databox-vertical.databox-lg .databox-icon .wi:before {
  font-size: 50px !important;
  padding: 0;
}

.databox.databox-vertical.databox-lg .databox-top {
  height: 50px;
}

.databox.databox-vertical.databox-lg .databox-bottom {
  height: 100px;
}

.databox.databox-vertical.databox-lg.databox-inverted .databox-icon > .fa:before,
.databox.databox-vertical.databox-lg.databox-inverted .databox-icon .typcn:before,
.databox.databox-vertical.databox-lg.databox-inverted .databox-icon .glyphicon:before,
.databox.databox-vertical.databox-lg.databox-inverted .databox-icon .wi:before {
  font-size: 85px;
  padding: 0;
}

.databox.databox-vertical.databox-lg.databox-inverted .databox-top {
  height: 100px;
}

.databox.databox-vertical.databox-lg.databox-inverted .databox-bottom {
  height: 50px;
}

.databox.databox-vertical.databox-lg.databox-halved .databox-icon > .fa:before,
.databox.databox-vertical.databox-lg.databox-halved .databox-icon .typcn:before,
.databox.databox-vertical.databox-lg.databox-halved .databox-icon .glyphicon:before,
.databox.databox-vertical.databox-lg.databox-halved .databox-icon .wi:before {
  font-size: 58px;
  padding: 0;
}

.databox.databox-vertical.databox-lg.databox-halved .databox-top {
  height: 75px;
}

.databox.databox-vertical.databox-lg.databox-halved .databox-bottom {
  height: 75px;
}

.databox.databox-vertical.databox-xlg {
  height: 100px;
  width: 100%;
}

.databox.databox-vertical.databox-xlg .databox-icon > .fa:before,
.databox.databox-vertical.databox-xlg .databox-icon .typcn:before,
.databox.databox-vertical.databox-xlg .databox-icon .glyphicon:before,
.databox.databox-vertical.databox-xlg .databox-icon .wi:before {
  font-size: 38px;
  padding: 0;
}

.databox.databox-vertical.databox-xlg .databox-top {
  height: 50px;
}

.databox.databox-vertical.databox-xlg .databox-bottom {
  height: 150px;
}

.databox.databox-vertical.databox-xlg.databox-inverted .databox-icon > .fa:before,
.databox.databox-vertical.databox-xlg.databox-inverted .databox-icon .typcn:before,
.databox.databox-vertical.databox-xlg.databox-inverted .databox-icon .glyphicon:before,
.databox.databox-vertical.databox-xlg.databox-inverted .databox-icon .wi:before {
  font-size: 120px;
  padding: 10px;
}

.databox.databox-vertical.databox-xlg.databox-inverted .databox-top {
  height: 150px;
}

.databox.databox-vertical.databox-xlg.databox-inverted .databox-bottom {
  height: 50px;
}

.databox.databox-vertical.databox-xlg.databox-halved .databox-icon > .fa:before,
.databox.databox-vertical.databox-xlg.databox-halved .databox-icon .typcn:before,
.databox.databox-vertical.databox-xlg.databox-halved .databox-icon .glyphicon:before,
.databox.databox-vertical.databox-xlg.databox-halved .databox-icon .wi:before {
  font-size: 85px;
  padding: 0;
}

.databox.databox-vertical.databox-xlg.databox-halved .databox-top {
  height: 100px;
}

.databox.databox-vertical.databox-xlg.databox-halved .databox-bottom {
  height: 100px;
}

.databox.databox-vertical.databox-xxlg {
  height: 300px;
  width: 100%;
}

.databox.databox-vertical.databox-xxlg .databox-icon > .fa:before,
.databox.databox-vertical.databox-xxlg .databox-icon .typcn:before,
.databox.databox-vertical.databox-xxlg .databox-icon .glyphicon:before,
.databox.databox-vertical.databox-xxlg .databox-icon .wi:before {
  font-size: 38px;
  padding: 0;
}

.databox.databox-vertical.databox-xxlg .databox-top {
  height: 50px;
}

.databox.databox-vertical.databox-xxlg .databox-bottom {
  height: 250px;
}

.databox.databox-vertical.databox-xxlg.databox-inverted .databox-icon > .fa:before,
.databox.databox-vertical.databox-xxlg.databox-inverted .databox-icon .typcn:before,
.databox.databox-vertical.databox-xxlg.databox-inverted .databox-icon .glyphicon:before,
.databox.databox-vertical.databox-xxlg.databox-inverted .databox-icon .wi:before {
  font-size: 220px;
  padding: 10px;
}

.databox.databox-vertical.databox-xxlg.databox-inverted .databox-top {
  height: 250px;
}

.databox.databox-vertical.databox-xxlg.databox-inverted .databox-bottom {
  height: 50px;
}

.databox.databox-vertical.databox-xxlg.databox-halved .databox-icon > .fa:before,
.databox.databox-vertical.databox-xxlg.databox-halved .databox-icon .typcn:before,
.databox.databox-vertical.databox-xxlg.databox-halved .databox-icon .glyphicon:before,
.databox.databox-vertical.databox-xxlg.databox-halved .databox-icon .wi:before {
  font-size: 120px;
  padding: 10px;
}

.databox.databox-vertical.databox-xxlg.databox-halved .databox-top {
  height: 150px;
}

.databox.databox-vertical.databox-xxlg.databox-halved .databox-bottom {
  height: 150px;
}

.databox.databox-vertical.databox-xxxlg {
  height: 500px;
  width: 100%;
}

.databox.databox-vertical.databox-xxxlg .databox-icon > .fa:before,
.databox.databox-vertical.databox-xxxlg .databox-icon .typcn:before,
.databox.databox-vertical.databox-xxxlg .databox-icon .glyphicon:before,
.databox.databox-vertical.databox-xxxlg .databox-icon .wi:before {
  font-size: 38px;
  padding: 0;
}

.databox.databox-vertical.databox-xxxlg .databox-top {
  height: 50px;
}

.databox.databox-vertical.databox-xxxlg .databox-bottom {
  height: 450px;
}

.databox.databox-vertical.databox-xxxlg.databox-inverted .databox-icon > .fa:before,
.databox.databox-vertical.databox-xxxlg.databox-inverted .databox-icon .typcn:before,
.databox.databox-vertical.databox-xxxlg.databox-inverted .databox-icon .glyphicon:before,
.databox.databox-vertical.databox-xxxlg.databox-inverted .databox-icon .wi:before {
  font-size: 420px;
  padding: 10px;
}

.databox.databox-vertical.databox-xxxlg.databox-inverted .databox-top {
  height: 450px;
}

.databox.databox-vertical.databox-xxxlg.databox-inverted .databox-bottom {
  height: 50px;
}

.databox.databox-vertical.databox-xxxlg.databox-halved .databox-icon > .fa:before,
.databox.databox-vertical.databox-xxxlg.databox-halved .databox-icon .typcn:before,
.databox.databox-vertical.databox-xxxlg.databox-halved .databox-icon .glyphicon:before,
.databox.databox-vertical.databox-xxxlg.databox-halved .databox-icon .wi:before {
  font-size: 220px;
  padding: 10px;
}

.databox.databox-vertical.databox-xxxlg.databox-halved .databox-top {
  height: 250px;
}

.databox.databox-vertical.databox-xxxlg.databox-halved .databox-bottom {
  height: 250px;
}

.databox .chart {
  font-size: 13px;
}

/*#region Alerts*/
.alert {
  /*  margin-bottom: 20px;
    margin-top: 0;
    color: #fff;
    border-width: 0;
    border-right-width: 5px;
    padding: 10px;
    border-radius: 0;*/
}

.alert .close {
  top: 0;
  left: 0;
  line-height: 16px;
  color: #444;
}

/*.alert.radius-bordered {
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}
.alert.alert-shadowed {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.alert.alert-heading {
  font-weight: 600;
}
.alert.alert-danger {
  border-color: #df5138;
  background: #e46f61;
}
.alert.alert-warning {
  border-color: #ffce55;
  color: #555;
  background: #fff1a8;
}
.alert.alert-success {
  border-color: #8cc474;
  background: #a0d468;
}
.alert.alert-info {
  border-color: #11a9cc;
  background: #57b5e3;
}*/
/*#region Tabs*/
/*#region Tab Content*/
.tab-content {
  background-color: #fbfbfb;
  padding: 16px 12px;
  position: relative;
  -webkit-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
}

.tab-content.no-padding {
  padding: 0;
}

.tab-content.no-border {
  border: 0;
  padding: 12px;
}

.tab-content.radius-bordered {
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}

.tab-content.tabs-flat {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-top: 1px solid #eaeaea;
}

/*#endregion Tab Content*/
/*#region Buttons*/
.btn {
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
  position: relative;
  display: inline-block;
  color: #fff;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  -o-transition: all 0.15s ease;
  transition: all 0.15s ease;
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 5px;
  background-clip: padding-box;
  font-size: 13px;
}

.btn:hover,
.btn:focus {
  color: #fff;
}

.btn.btn-link {
  border: none !important;
  background: transparent none !important;
  color: #2672ec !important;
  -webkit-text-shadow: none !important;
  text-shadow: none !important;
  padding: 4px 12px !important;
  line-height: 20px !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

.btn.btn-link:hover {
  background: none !important;
  -webkit-text-shadow: none !important;
  text-shadow: none !important;
}

.btn.btn-link.active {
  background: none !important;
  text-decoration: underline;
  color: #009ceb !important;
}

.btn.btn-link.active:after {
  display: none;
}

.btn.btn-link.disabled,
.btn.btn-link[disabled] {
  background: 0;
  opacity: 0.65;
  filter: alpha(opacity=65);
}

.btn.btn-link.disabled:hover,
.btn.btn-link[disabled]:hover {
  background: none !important;
  text-decoration: none !important;
}

.btn.shiny {
  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}

.btn.shiny:hover {
  zoom: 1;
  filter: alpha(opacity=90);
  -webkit-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
}

.btn.shiny.active,
.btn.shiny:focus {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn.shiny.dropdown-toggle {
  border-right-width: 0 !important;
}

.btn.btn-circle {
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  width: 60px;
  height: 60px;
  text-align: center;
  padding: 11px 12px;
}

.btn.btn-circle > .fa,
.btn.btn-circle .typcn,
.btn.btn-circle .glyphicon,
.btn.btn-circle > [class*=wi-] {
  font-size: 20px;
  margin: 0 auto;
  line-height: 34px;
}

.btn.btn-circle.btn-xs {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
}

.btn.btn-circle.btn-xs > .fa,
.btn.btn-circle.btn-xs .typcn,
.btn.btn-circle.btn-xs .glyphicon,
.btn.btn-circle.btn-xs > [class*=wi-] {
  font-size: 12px;
  line-height: 14px;
}

.btn.btn-circle.btn-sm {
  width: 50px;
  height: 50px;
  padding: 10px 15px;
}

.btn.btn-circle.btn-sm > .fa,
.btn.btn-circle.btn-sm .typcn,
.btn.btn-circle.btn-sm .glyphicon,
.btn.btn-circle.btn-sm > [class*=wi-] {
  font-size: 18px;
  line-height: 26px;
  border-radius: 50%;
}

.btn.btn-circle.btn-lg {
  width: 70px;
  height: 70px;
  padding: 10px;
}

.btn.btn-circle.btn-lg > .fa,
.btn.btn-circle.btn-lg .typcn,
.btn.btn-circle.btn-lg .glyphicon,
.btn.btn-circle.btn-lg > [class*=wi-] {
  font-size: 28px;
  line-height: 46px;
}

.btn.btn-labeled {
  position: relative;
  padding-right: 0;
}

.btn.btn-labeled.btn-block .btn-label {
  margin-left: 0;
}

.btn.btn-labeled .btn-label {
  display: block;
  float: right;
  margin: -7px 12px -9px -2px;
  margin-left: 12px;
  margin-right: -2px;
  padding: 8px 10px 8px 11px;
  position: relative;
  background: rgba(0, 0, 0, 0.06);
  line-height: 15px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.btn.btn-labeled .btn-label > .fa,
.btn.btn-labeled .btn-label .typcn,
.btn.btn-labeled .btn-label .glyphicon,
.btn.btn-labeled .btn-label > [class*=wi-] {
  margin-left: 0;
}

.btn.icon-only {
  width: 36px;
  height: 34px;
  padding: 5px 3px;
}

.btn.icon-only > .fa,
.btn.icon-only .typcn,
.btn.icon-only .glyphicon,
.btn.icon-only > [class*=wi-] {
  margin: 0;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  font-size: 22px;
  line-height: 22px;
}

.btn > .fa,
.btn .typcn,
.btn .glyphicon,
.btn > [class*=wi-] {
  display: inline;
  margin-left: 4px;
  font-size: 14px;
}

.btn > .fa.right,
.btn .typcn.right,
.btn .glyphicon.right,
.btn > [class*=wi-].right {
  margin-left: 0;
  margin-right: 4px;
}

/*#region Button Sizes*/
.btn-xs {
  font-size: 11px;
  padding: 2px 7px;
}

.btn-xs > .fa,
.btn-xs > .typcn,
.btn-xs > .glyphicon,
.btn-xs > [class*=wi-] {
  font-size: 12px;
  margin-left: 2px;
}

.btn-xs > .fa.right,
.btn-xs > .typcn.right,
.btn-xs > .glyphicon.right,
.btn-xs > [class*=wi-].right {
  margin-left: 0;
  margin-right: 2px;
}

.btn-xs.icon-only {
  width: 24px;
  height: 24px;
  padding: 2px 6px;
}

.btn-xs.icon-only > .fa,
.btn-xs.icon-only > .typcn,
.btn-xs.icon-only > .glyphicon,
.btn-xs.icon-only > [class*=wi-] {
  font-size: 12px;
  line-height: 7px;
}

.btn-sm {
  font-size: 12px;
  padding: 4px 9px;
  line-height: 1.39;
}

.btn-sm > .fa,
.btn-sm > .typcn,
.btn-sm > .glyphicon,
.btn-sm > [class*=wi-] {
  font-size: 13px;
  margin-left: 3px;
}

.btn-sm > .fa.right,
.btn-sm > .typcn.right,
.btn-sm > .glyphicon.right,
.btn-sm > [class*=wi-].right {
  margin-left: 0;
  margin-right: 3px;
}

.btn-sm.icon-only {
  width: 31px;
  height: 30px;
  padding: 3px !important;
}

.btn-sm.icon-only > .fa,
.btn-sm.icon-only > .typcn,
.btn-sm.icon-only > .glyphicon,
.btn-sm.icon-only > [class*=wi-] {
  font-size: 20px;
  line-height: 21px;
}

.btn-lg {
  line-height: 2;
  padding: 9px 18px;
  font-size: 14px;
}

.btn-lg.icon-only {
  width: 40px;
  height: 38px;
  padding: 6px !important;
}

.btn-lg.icon-only > .fa,
.btn-lg.icon-only > .typcn,
.btn-lg.icon-only > .glyphicon,
.btn-lg.icon-only > [class*=wi-] {
  font-size: 24px;
  line-height: 26px;
}

.btn-lg > .fa,
.btn-lg > .typcn,
.btn-lg > .glyphicon,
.btn-lg > [class*=wi-] {
  font-size: 16px;
  margin-left: 6px;
}

.btn-lg > .fa.right,
.btn-lg > .typcn.right,
.btn-lg > .glyphicon.right,
.btn-lg > [class*=wi-].right {
  margin-left: 0;
  margin-right: 6px;
}

/*#endregion Button Sizes*/
/*#region Default Button*/
.btn,
.btn-default,
.btn:focus,
.btn-default:focus {
  color: #444;
  background-color: #fff;
  border-color: #d5d5d5;
}

.btn:hover,
.btn-default:hover {
  color: #444;
}

.btn.shiny,
.btn-default.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: -moz-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: -o-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: linear-gradient(to bottom, #fff 0, #ededed 100%);
}

.btn.dropdown-toggle:not(:first-child),
.btn-default.dropdown-toggle:not(:first-child) {
  border-right-width: 0 !important;
  margin-right: -1px;
}

.btn-default:hover,
.open .btn-default.dropdown-toggle {
  border-color: #b8b8b8;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  color: #444;
}

.open .btn-default.dropdown-toggle {
  border-color: #b8b8b8;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/*#endregion Default Button*/
/*#region Primary Button*/
.btn-primary:hover {
  color: #fff;
}

.btn-primary.dropdown-toggle {
  border-right-color: #6a99ee !important;
}

.btn-primary.active {
  background-color: #2c56b1 !important;
  border-color: #21448d;
}

.btn-primary.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iNSUiIHN0b3AtY29sb3I9IiMwMDk1ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNWVmZiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(center top, #0095ff 5%, #005eff 100%);
  background-image: -moz-linear-gradient(center top, #0095ff 5%, #005eff 100%);
  background-image: -o-linear-gradient(center top, #0095ff 5%, #005eff 100%);
  background-image: linear-gradient(center to bottom, #0095ff 5%, #005eff 100%);
}

.btn-primary:hover,
.open .btn-primary.dropdown-toggle {
  background-color: #4285f4 !important;
  border-color: var(--main-color);
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion Primary Button*/
/*#region info Button*/
.btn-info,
.btn-info:focus {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  color: #fff;
}

.btn-info:hover {
  color: #fff;
}

.btn-info.dropdown-toggle {
  border-right-color: var(--main-color) !important;
}

.btn-info.active {
  background-color: rgba(var(--main-color-rgb), 90%) !important;
  border-color: rgba(var(--main-color-rgb), 90%);
}

.btn-info.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGFkZWUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzhhNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(#00adee), to(#0078a5));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(#00adee), to(#0078a5));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(#00adee), to(#0078a5));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(#00adee), to(#0078a5));
}

.btn-info:hover,
.open .btn-info.dropdown-toggle {
  background-color: rgba(var(--main-color-rgb), 90%) !important;
  border-color: rgba(var(--main-color-rgb), 90%);
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion info Button*/
/*#region Success Button*/
.btn-success,
.btn-success:focus {
  background-color: #81c784 !important;
  border-color: #81c784 !important;
  color: #fff;
}

.btn-success:hover {
  color: #fff;
}

.btn-success.dropdown-toggle {
  border-right-color: #a0d468 !important;
}

.btn-success.active {
  background-color: #3e802f !important;
  border-color: #2f6124;
}

.btn-success.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM3ZGI3MmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRlN2QwZSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(#7db72f), to(#4e7d0e));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(#7db72f), to(#4e7d0e));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(#7db72f), to(#4e7d0e));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(#7db72f), to(#4e7d0e));
}

.btn-success:hover,
.open .btn-success.dropdown-toggle {
  background-color: #65b951 !important;
  border-color: #65b951;
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #53a93f !important;
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion Success Button*/
/*#region Warning Button*/
.btn-warning,
.btn-warning:focus {
  background-color: #f4b400 !important;
  border-color: #f4b400;
  color: #fff;
}

.btn-warning:hover {
  color: #fff;
}

.btn-warning.dropdown-toggle {
  border-right-color: #ffce55 !important;
}

.btn-warning.active {
  background-color: #f2a73e !important;
  border-color: #f0981c;
}

.btn-warning.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmYWE1MWEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y0N2EyMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(#faa51a), to(#f47a20));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(#faa51a), to(#f47a20));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(#faa51a), to(#f47a20));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(#faa51a), to(#f47a20));
}

.btn-warning:hover,
.open .btn-warning.dropdown-toggle {
  background-color: #f6c12a !important;
  border-color: #f6c12a;
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #f4b400 !important;
  border-color: #f4b400;
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion Warning Button*/
/*#region Danger Button*/
.btn-danger,
.btn-danger:focus {
  background-color: #d73d32 !important;
  border-color: #d73d32;
  color: #fff;
}

.btn-danger:hover {
  color: #fff;
}

.btn-danger.dropdown-toggle {
  border-right-color: #e46f61 !important;
}

.btn-danger.active {
  background-color: #be3e2e !important;
  border-color: #9a3323;
}

.btn-danger.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlZDFjMjQiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhMTMxNyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(#ed1c24), to(#aa1317));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(#ed1c24), to(#aa1317));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(#ed1c24), to(#aa1317));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(#ed1c24), to(#aa1317));
}

.btn-danger:hover,
.open .btn-danger.dropdown-toggle {
  background-color: #e74b37 !important;
  border-color: #e74b37;
}

.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #d73d32 !important;
  border-color: #d73d32;
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion Danger Button*/
/*#region Blue Button*/
.btn-blue,
.btn-blue:focus {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  color: #fff;
}

.btn-blue:hover {
  color: #fff;
}

.btn-blue.dropdown-toggle {
  border-right-color: var(--main-color) !important;
}

.btn-blue.active {
  background-color: rgba(var(--main-color-rgb), 90%) !important;
  border-color: rgba(var(--main-color-rgb), 90%);
}

.btn-blue.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM3MGJhZmQiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ0OWNlYyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, left top, left bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
  background-image: -moz-linear-gradient(linear, left top, left bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
  background-image: -o-linear-gradient(linear, left top, left bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
  background-image: linear-gradient(linear, left to bottom, left bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
}

.btn-blue:hover,
.open .btn-blue.dropdown-toggle {
  background-color: rgba(var(--main-color-rgb), 90%) !important;
  border-color: rgba(var(--main-color-rgb), 90%);
  color: #fff;
}

.btn-blue.disabled,
.btn-blue[disabled],
fieldset[disabled] .btn-blue,
.btn-blue.disabled:hover,
.btn-blue[disabled]:hover,
fieldset[disabled] .btn-blue:hover,
.btn-blue.disabled:focus,
.btn-blue[disabled]:focus,
fieldset[disabled] .btn-blue:focus,
.btn-blue.disabled:active,
.btn-blue[disabled]:active,
fieldset[disabled] .btn-blue:active,
.btn-blue.disabled.active,
.btn-blue[disabled].active,
fieldset[disabled] .btn-blue.active {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion Blue Button*/
/*#region sky Button*/
.btn-sky,
.btn-sky:focus {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  color: #fff;
}

.btn-sky:hover {
  color: #fff;
}

.btn-sky.dropdown-toggle {
  border-right-color: var(--main-color) !important;
}

.btn-sky.active {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
}

.btn-sky.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyOGIzZDMiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIwOTViMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
}

.btn-sky:hover,
.open .btn-sky.dropdown-toggle {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  color: #fff;
}

.btn-sky.disabled,
.btn-sky[disabled],
fieldset[disabled] .btn-sky,
.btn-sky.disabled:hover,
.btn-sky[disabled]:hover,
fieldset[disabled] .btn-sky:hover,
.btn-sky.disabled:focus,
.btn-sky[disabled]:focus,
fieldset[disabled] .btn-sky:focus,
.btn-sky.disabled:active,
.btn-sky[disabled]:active,
fieldset[disabled] .btn-sky:active,
.btn-sky.disabled.active,
.btn-sky[disabled].active,
fieldset[disabled] .btn-sky.active {
  background-color: #11a9cc !important;
  border-color: #11a9cc;
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion sky Button*/
/*#region azure Button*/
.btn-azure,
.btn-azure:focus {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  color: #fff;
}

.btn-azure:hover {
  color: #fff;
}

.btn-azure.dropdown-toggle {
  border-right-color: var(--main-color) !important;
}

.btn-azure.active {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
}

.btn-azure.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzZWNkZjEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJiYWRjZSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(var(--main-color)), to(rgba(var(--main-color-rgb), 90%)));
}

.btn-azure:hover,
.open .btn-azure.dropdown-toggle {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  color: #fff;
}

.btn-azure.disabled,
.btn-azure[disabled],
fieldset[disabled] .btn-azure,
.btn-azure.disabled:hover,
.btn-azure[disabled]:hover,
fieldset[disabled] .btn-azure:hover,
.btn-azure.disabled:focus,
.btn-azure[disabled]:focus,
fieldset[disabled] .btn-azure:focus,
.btn-azure.disabled:active,
.btn-azure[disabled]:active,
fieldset[disabled] .btn-azure:active,
.btn-azure.disabled.active,
.btn-azure[disabled].active,
fieldset[disabled] .btn-azure.active {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion azure Button*/
/*#region palegreen Button*/
.btn-palegreen,
.btn-palegreen:focus {
  background-color: #a0d468 !important;
  border-color: #a0d468;
  color: #fff;
}

.btn-palegreen:hover {
  color: #fff;
}

.btn-palegreen.dropdown-toggle {
  border-right-color: #a6d791 !important;
}

.btn-palegreen.active {
  background-color: #74aa5d !important;
  border-color: #699755;
}

.btn-palegreen.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM5Y2Q1ODQiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc0YWE1ZCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(#9cd584), to(#74aa5d));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(#9cd584), to(#74aa5d));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(#9cd584), to(#74aa5d));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(#9cd584), to(#74aa5d));
}

.btn-palegreen:hover,
.open .btn-palegreen.dropdown-toggle {
  background-color: #9cd584 !important;
  border-color: #9cd584;
  color: #fff;
}

.btn-palegreen.disabled,
.btn-palegreen[disabled],
fieldset[disabled] .btn-palegreen,
.btn-palegreen.disabled:hover,
.btn-palegreen[disabled]:hover,
fieldset[disabled] .btn-palegreen:hover,
.btn-palegreen.disabled:focus,
.btn-palegreen[disabled]:focus,
fieldset[disabled] .btn-palegreen:focus,
.btn-palegreen.disabled:active,
.btn-palegreen[disabled]:active,
fieldset[disabled] .btn-palegreen:active,
.btn-palegreen.disabled.active,
.btn-palegreen[disabled].active,
fieldset[disabled] .btn-palegreen.active {
  background-color: #a0d468 !important;
  border-color: #a0d468;
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion palegreen Button*/
/*#region yellow Button*/
.btn-yellow,
.btn-yellow:focus {
  background-color: #ffce55 !important;
  border-color: #ffce55;
  color: #fff;
}

.btn-yellow:hover {
  color: #fff;
}

.btn-yellow.dropdown-toggle {
  border-right-color: #f6d52e !important;
}

.btn-yellow.active {
  background-color: #fbc220 !important;
  border-color: #f3ba17;
  color: #fff !important;
}

.btn-yellow.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZGQzNWEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiYzIyMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(#fdd35a), to(#fbc220));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(#fdd35a), to(#fbc220));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(#fdd35a), to(#fbc220));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(#fdd35a), to(#fbc220));
}

.btn-yellow:hover,
.open .btn-yellow.dropdown-toggle {
  background-color: #fdd35a !important;
  border-color: #fdd35a;
  color: #fff;
}

.btn-yellow.disabled,
.btn-yellow[disabled],
fieldset[disabled] .btn-yellow,
.btn-yellow.disabled:hover,
.btn-yellow[disabled]:hover,
fieldset[disabled] .btn-yellow:hover,
.btn-yellow.disabled:focus,
.btn-yellow[disabled]:focus,
fieldset[disabled] .btn-yellow:focus,
.btn-yellow.disabled:active,
.btn-yellow[disabled]:active,
fieldset[disabled] .btn-yellow:active,
.btn-yellow.disabled.active,
.btn-yellow[disabled].active,
fieldset[disabled] .btn-yellow.active {
  background-color: #ffce55 !important;
  border-color: #ffce55;
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion yellow Button*/
/*#region darkorange Button*/
.btn-darkorange,
.btn-darkorange:focus {
  background-color: #ed4e2a !important;
  border-color: #ed4e2a;
  color: #fff;
}

.btn-darkorange:hover {
  color: #fff;
}

.btn-darkorange.dropdown-toggle {
  border-right-color: #f07154 !important;
}

.btn-darkorange.active {
  background-color: #da411f !important;
  border-color: #cc3918;
}

.btn-darkorange.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlZjY5NGIiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RhNDExZiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(#ef694b), to(#da411f));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(#ef694b), to(#da411f));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(#ef694b), to(#da411f));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(#ef694b), to(#da411f));
}

.btn-darkorange:hover,
.open .btn-darkorange.dropdown-toggle {
  background-color: #ef694b !important;
  border-color: #ef694b;
  color: #fff;
}

.btn-darkorange.disabled,
.btn-darkorange[disabled],
fieldset[disabled] .btn-darkorange,
.btn-darkorange.disabled:hover,
.btn-darkorange[disabled]:hover,
fieldset[disabled] .btn-darkorange:hover,
.btn-darkorange.disabled:focus,
.btn-darkorange[disabled]:focus,
fieldset[disabled] .btn-darkorange:focus,
.btn-darkorange.disabled:active,
.btn-darkorange[disabled]:active,
fieldset[disabled] .btn-darkorange:active,
.btn-darkorange.disabled.active,
.btn-darkorange[disabled].active,
fieldset[disabled] .btn-darkorange.active {
  background-color: #ed4e2a !important;
  border-color: #ed4e2a;
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion darkorange Button*/
/*#region magenta Button*/
.btn-magenta,
.btn-magenta:focus {
  background-color: #bc5679 !important;
  border-color: #bc5679;
  color: #fff;
}

.btn-magenta:hover {
  color: #fff;
}

.btn-magenta.dropdown-toggle {
  border-right-color: #c96d8c !important;
}

.btn-magenta.active {
  background-color: #a5325a !important;
  border-color: #9f3156;
}

.btn-magenta.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjNDYyODMiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2E1MzI1YSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(#c46283), to(#a5325a));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(#c46283), to(#a5325a));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(#c46283), to(#a5325a));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(#c46283), to(#a5325a));
}

.btn-magenta:hover,
.open .btn-magenta.dropdown-toggle {
  background-color: #c46283 !important;
  border-color: #c46283;
  color: #fff;
}

.btn-magenta.disabled,
.btn-magenta[disabled],
fieldset[disabled] .btn-magenta,
.btn-magenta.disabled:hover,
.btn-magenta[disabled]:hover,
fieldset[disabled] .btn-magenta:hover,
.btn-magenta.disabled:focus,
.btn-magenta[disabled]:focus,
fieldset[disabled] .btn-magenta:focus,
.btn-magenta.disabled:active,
.btn-magenta[disabled]:active,
fieldset[disabled] .btn-magenta:active,
.btn-magenta.disabled.active,
.btn-magenta[disabled].active,
fieldset[disabled] .btn-magenta.active {
  background-color: #bc5679 !important;
  border-color: #bc5679;
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion magenta Button*/
/*#region purple Button*/
.btn-purple,
.btn-purple:focus {
  background-color: #7e3794 !important;
  border-color: #7e3794;
  color: #fff;
}

.btn-purple:hover {
  color: #fff;
}

.btn-purple.dropdown-toggle {
  border-right-color: #9852ae !important;
}

.btn-purple.active {
  background-color: #69257e !important;
  border-color: #601e74;
}

.btn-purple.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4YzQ0YTIiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY5MjU3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(#8c44a2), to(#69257e));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(#8c44a2), to(#69257e));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(#8c44a2), to(#69257e));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(#8c44a2), to(#69257e));
}

.btn-purple:hover,
.open .btn-purple.dropdown-toggle {
  background-color: #8c44a2 !important;
  border-color: #8c44a2;
  color: #fff;
}

.btn-purple.disabled,
.btn-purple[disabled],
fieldset[disabled] .btn-purple,
.btn-purple.disabled:hover,
.btn-purple[disabled]:hover,
fieldset[disabled] .btn-purple:hover,
.btn-purple.disabled:focus,
.btn-purple[disabled]:focus,
fieldset[disabled] .btn-purple:focus,
.btn-purple.disabled:active,
.btn-purple[disabled]:active,
fieldset[disabled] .btn-purple:active,
.btn-purple.disabled.active,
.btn-purple[disabled].active,
fieldset[disabled] .btn-purple.active {
  background-color: #7e3794 !important;
  border-color: #7e3794;
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion purple Button*/
/*#region maroon Button*/
.btn-maroon,
.btn-maroon:focus {
  background-color: #981b48 !important;
  border-color: #981b48;
  color: #fff;
}

.btn-maroon:hover {
  color: #fff;
}

.btn-maroon.dropdown-toggle {
  border-left-color: #b55274 !important;
}

.btn-maroon.active {
  background-color: #7c1138 !important;
  border-color: #9f3156;
}

.btn-maroon.shiny {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNhODI4NTYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg2MTIzYyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(linear, right top, right bottom, from(#a82856), to(#86123c));
  background-image: -moz-linear-gradient(linear, right top, right bottom, from(#a82856), to(#86123c));
  background-image: -o-linear-gradient(linear, right top, right bottom, from(#a82856), to(#86123c));
  background-image: linear-gradient(linear, right to bottom, right bottom, from(#a82856), to(#86123c));
}

.btn-maroon:hover,
.open .btn-maroon.dropdown-toggle {
  background-color: #a82856 !important;
  border-color: #a82856;
  color: #fff;
}

.btn-maroon.disabled,
.btn-maroon[disabled],
fieldset[disabled] .btn-maroon,
.btn-maroon.disabled:hover,
.btn-maroon[disabled]:hover,
fieldset[disabled] .btn-maroon:hover,
.btn-maroon.disabled:focus,
.btn-maroon[disabled]:focus,
fieldset[disabled] .btn-maroon:focus,
.btn-maroon.disabled:active,
.btn-maroon[disabled]:active,
fieldset[disabled] .btn-maroon:active,
.btn-maroon.disabled.active,
.btn-maroon[disabled].active,
fieldset[disabled] .btn-maroon.active {
  background-color: #981b48 !important;
  border-color: #981b48;
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/*#endregion maroon Button*/
.btn.disabled.active,
.btn[disabled].active,
.btn.disabled:focus,
.btn[disabled]:focus,
.btn.disabled:active,
.btn[disabled]:active {
  outline: 0;
}

.btn.disabled:active,
.btn[disabled]:active {
  top: 0;
  right: 0;
}

.open .btn.dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/*#region Group Button*/
.btn-group > .btn,
.btn-group > .btn + .btn {
  margin: 0;
}

.btn-group > .btn:first-child {
  margin: 0;
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
}

.btn-group > .btn:last-child {
  -webkit-border-radius: 0 2px 2px 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 2px 2px 0;
  -moz-background-clip: padding;
  border-radius: 0 2px 2px 0;
  background-clip: padding-box;
}

.btn-group > .btn > .caret {
  margin-right: 1px;
  border-width: 5px;
  border-top-color: #eee;
  margin-top: 1px;
}

.btn-group > .btn.btn-default > .caret {
  border-top-color: #666;
}

.btn-group > .btn + .btn.dropdown-toggle {
  padding-left: 7px;
  padding-right: 7px;
}

.btn-group > .btn + .btn-lg.dropdown-toggle {
  padding-right: 10px;
  padding-left: 10px;
}

.btn-group > .btn + .btn-sm.dropdown-toggle {
  padding-right: 6px;
  padding-left: 6px;
}

.btn-group > .btn + .btn-sm.dropdown-toggle .fa {
  line-height: 13px;
}

.btn-group > .btn + .btn-xs.dropdown-toggle {
  padding-right: 5px;
  padding-left: 5px;
}

.btn-group > .btn + .btn-xs.dropdown-toggle .fa {
  line-height: 13px;
}

.btn-group .dropdown-toggle {
  -webkit-border-radius: 0 2px 2px 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 2px 2px 0;
  -moz-background-clip: padding;
  border-radius: 0 2px 2px 0;
  background-clip: padding-box;
}

.btn-group .dropdown-toggle .fa {
  display: inline-block;
  margin-top: 1px;
  font-size: 14px;
  line-height: 14px;
  margin-right: 0;
  margin-left: 0;
}

.btn-group > .btn,
.btn-group + .btn {
  margin: 0;
}

.btn-group > .btn.active:after,
.btn-group + .btn.active:after {
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-bottom-width: 1px;
}

.btn-group-vertical > .btn:not(:last-child) {
  border-bottom: 0;
}

.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-left-radius: 2px;
}

.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-bottom-right-radius: 2px;
}

.btn-group-vertical > .btn,
.btn-group-vertical > .btn + .btn {
  margin: 0;
}

.btn-group-vertical > .btn:first-child {
  margin-left: 0;
}

/*#region Accordion*/
.accordion.spaced.panel-group .panel + .panel {
  margin-top: 3px;
}

.accordion.panel-group {
  border: 1px solid #d8d8d8;
  border-top-width: 0;
}

.accordion.panel-group .panel {
  border-radius: 0;
  border: 0;
  background-color: #fff;
  box-shadow: none;
}

.accordion.panel-group .panel:last-child {
  border-bottom-width: 1px;
}

.accordion.panel-group .panel .collapse {
  background-color: #fff;
}

.accordion.panel-group .panel + .panel {
  margin-top: 0;
}

.accordion.panel-group .panel-heading {
  padding: 0;
}

.accordion.panel-group .panel-heading + .panel-collapse .panel-body {
  border-top-color: #d5d5d5 !important;
}

.accordion.panel-group .panel-heading .accordion-toggle {
  color: #555;
  background-color: #fff;
  position: relative;
  font-weight: bold;
  font-size: 13px;
  line-height: 1;
  padding: 10px;
  display: block;
}

.accordion.panel-group .panel-heading .accordion-toggle:after {
  -webkit-transition: all 0.218s;
  -moz-transition: all 0.218s;
  -o-transition: all 0.218s;
  transition: all 0.218s;
  position: absolute;
  left: 20px;
  top: 8px;
  font-family: "FontAwesome";
  font-size: 17px;
  font-weight: bold;
  content: "\f107";
  color: #bebebe;
}

.accordion.panel-group .panel-heading .accordion-toggle.collapsed:after {
  content: "\f105";
}

.accordion.panel-group .panel-heading .accordion-toggle.collapsed {
  color: #737373;
  font-weight: normal;
  background-color: #fff;
  -webkit-transition: border 0.218s;
  -moz-transition: border 0.218s;
  -o-transition: border 0.218s;
  transition: border 0.218s;
  border-bottom: 1px solid #f5f5f5;
}

.accordion.panel-group .panel-heading .accordion-toggle:hover {
  color: #262626;
  text-decoration: none;
}

.accordion.panel-group .panel-heading .accordion-toggle:hover > [class*=icon-]:first-child {
  text-decoration: none;
}

.accordion.panel-group .panel-heading .accordion-toggle:hover:after {
  color: #262626;
}

.accordion.panel-group .panel-heading .accordion-toggle:focus,
.accordion.panel-group .panel-heading .accordion-toggle:active {
  outline: 0;
  text-decoration: none;
}

.accordion.panel-group .panel-heading .accordion-toggle > [class*=fa-]:first-child {
  width: 16px;
}

.accordion.panel-group .panel-body {
  background-color: #eee;
  border-right: 2px solid #eee;
  color: #262626 !important;
}

.accordion.panel-group.no-padding {
  padding: 0;
}

/*#region labels and badges */
.label,
.badge {
  display: inline-block;
  font-weight: 300;
  -webkit-text-shadow: none !important;
  text-shadow: none !important;
}

.label {
  font-size: 12px;
  padding: 4px 6px 4px 6px;
  -webkit-border-radius: 2px !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 2px !important;
  -moz-background-clip: padding !important;
  border-radius: 2px !important;
  background-clip: padding-box !important;
}

.label.label-sm {
  font-size: 12px;
  padding: 1px 4px 1px 4px;
}

.badge {
  font-size: 11px !important;
  font-weight: 300;
  text-align: center;
  background-color: #ccc;
  height: 18px;
  padding: 3px 6px 3px 6px;
  -webkit-border-radius: 12px !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 12px !important;
  -moz-background-clip: padding !important;
  border-radius: 12px !important;
  background-clip: padding-box !important;
  -webkit-text-shadow: none !important;
  text-shadow: none !important;
  vertical-align: middle;
}

.badge.badge-square {
  -webkit-border-radius: 2px !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 2px !important;
  -moz-background-clip: padding !important;
  border-radius: 2px !important;
  background-clip: padding-box !important;
}

.badge.badge-empty {
  display: inline-block;
  width: 10px;
  height: 10px;
  padding: 0;
  vertical-align: baseline;
}

.badge-default,
.label-default {
  background-color: #ccc !important;
}

.badge-default.graded,
.label-default.graded {
  background: linear-gradient(to left, #ccc, #e5e5e5) !important;
}

.badge-blue,
.label-blue {
  background-color: #5db2ff !important;
}

.badge-blue.graded,
.label-blue.graded {
  background: linear-gradient(to left, #5db2ff, #80c1fb) !important;
}

.label-info,
.badge-info {
  background-color: #57b5e3;
  background-image: none !important;
}

.label-info.graded,
.badge-info.graded {
  background: linear-gradient(to left, #57b5e3, #c4e6f6) !important;
}

.label-sky,
.badge-sky {
  background-color: #4993de;
  background-image: none !important;
}

.label-sky.graded,
.badge-sky.graded {
  background: linear-gradient(to left, #11a9cc, #c4e6f6) !important;
}

.badge-primary,
.label-primary {
  background-color: var(--main-color) !important;
}

.badge-primary.graded,
.label-primary.graded {
  background: linear-gradient(to left, #4374e0, #aec9fa) !important;
}

.label-azure,
.badge-azure {
  background-color: var(--main-color);
  background-image: none !important;
}

.label-azure.graded,
.badge-azure.graded {
  background: linear-gradient(to left, var(--main-color), #5edfff) !important;
}

.label-blueberry,
.badge-blueberry {
  background-color: #6f85bf;
  background-image: none !important;
}

.label-blueberry.graded,
.badge-blueberry.graded {
  background: linear-gradient(to left, #6f85bf, #ced5e9) !important;
}

.label-palegreen,
.badge-palegreen {
  background-color: #a0d468;
  background-image: none !important;
}

.label-palegreen.graded,
.badge-palegreen.graded {
  background: linear-gradient(to left, #a0d468, #c5e9b6) !important;
}

.label-success,
.badge-success {
  background-color: #53a93f;
  background-image: none !important;
}

.label-success.graded,
.badge-success.graded {
  background: linear-gradient(to left, #53a93f, #b0e0a4) !important;
}

.label-green,
.badge-green {
  background-color: #8cc474;
  background-image: none !important;
}

.label-green.graded,
.badge-green.graded {
  background: linear-gradient(to left, #8cc474, #a0d468) !important;
}

.label-lightyellow,
.badge-lightyellow {
  background-color: #f6d52e;
  background-image: none !important;
}

.label-lightyellow.graded,
.badge-lightyellow.graded {
  background: linear-gradient(to left, #f6d52e, #f8e26d) !important;
}

.label-yellow,
.badge-yellow {
  background-color: #ffce55;
  background-image: none !important;
}

.label-yellow.graded,
.badge-yellow.graded {
  background: linear-gradient(to left, #ffce55, #f6d52e) !important;
}

.label-warning,
.badge-warning {
  background-color: #f4b400;
  background-image: none !important;
}

.label-warning.graded,
.badge-warning.graded {
  background: linear-gradient(to left, #f4b400, #f8df95) !important;
}

.label-gold,
.badge-gold {
  background-color: #f9b256;
  background-image: none !important;
}

.label-gold.graded,
.badge-gold.graded {
  background: linear-gradient(to left, #f9b256, #fece90) !important;
}

.label-orange,
.badge-orange {
  background-color: #fb6e52;
  background-image: none !important;
}

.label-orange.graded,
.badge-orange.graded {
  background: linear-gradient(to left, #fb6e52, #fb9f8d) !important;
}

.label-lightred,
.badge-lightred {
  background-color: #e46f61;
  background-image: none !important;
}

.label-lightred.graded,
.badge-lightred.graded {
  background: linear-gradient(to left, #e46f61, #f88f83) !important;
}

.label-darkorange,
.badge-darkorange {
  background-color: #ed4e2a;
  background-image: none !important;
}

.label-darkorange.graded,
.badge-darkorange.graded {
  background: linear-gradient(to left, #ed4e2a, #f5a998) !important;
}

.label-red,
.badge-red {
  background-color: #df5138;
  background-image: none !important;
}

.label-red.graded,
.badge-red.graded {
  background: linear-gradient(to left, #df5138, #f5836f) !important;
}

.label-pink,
.badge-pink {
  background-color: #e75b8d;
  background-image: none !important;
}

.label-pink.graded,
.badge-pink.graded {
  background: linear-gradient(to left, #e75b8d, #f299b9) !important;
}

.label-darkpink,
.badge-darkpink {
  background-color: #cc324b;
  background-image: none !important;
}

.label-darkpink.graded,
.badge-darkpink.graded {
  background: linear-gradient(to left, #cc324b, #fb6880) !important;
}

.label-danger,
.badge-danger {
  background-color: #d73d32;
  background-image: none !important;
}

.label-danger.graded,
.badge-danger.graded {
  background: linear-gradient(to left, #d73d32, #f7b5b0) !important;
}

.label-magenta,
.badge-magenta {
  background-color: #bc5679;
  background-image: none !important;
}

.label-magenta.graded,
.badge-magenta.graded {
  background: linear-gradient(to left, #bc5679, #e9abc0) !important;
}

.label-purple,
.badge-purple {
  background-color: #7e3794;
  background-image: none !important;
}

.label-purple.graded,
.badge-purple.graded {
  background: linear-gradient(to left, #7e3794, #daafe8) !important;
}

.label-maroon,
.badge-maroon {
  background-color: #981b48;
  background-image: none !important;
}

.label-maroon.graded,
.badge-maroon.graded {
  background: linear-gradient(to left, #981b48, #eab6c9) !important;
}

/*#region Progress Bar*/
.progress {
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #e5e5e5;
  height: 18px;
  position: relative;
}

.progress:before {
  display: inline-block;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: 8121991;
  background-image: -webkit-radial-gradient(9px 9px 0, circle cover, #0ff 0, rgba(0, 0, 255, 0) 100%, #00f 95%);
  background-image: -moz-radial-gradient(9px 9px 0, circle cover, #0ff 0, rgba(0, 0, 255, 0) 100%, #00f 95%);
  background-image: -o-radial-gradient(9px 9px 0, circle cover, #0ff 0, rgba(0, 0, 255, 0) 100%, #00f 95%);
  background-image: radial-gradient(9px 9px 0, circle cover, #0ff 0, rgba(0, 0, 255, 0) 100%, #00f 95%);
}

.progress .progress-bar {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  line-height: 18px;
}

.progress.progress-xlg {
  height: 26px;
}

.progress.progress-xlg .progress-bar {
  line-height: 25px;
}

.progress.progress-lg {
  height: 22px;
}

.progress.progress-lg .progress-bar {
  line-height: 21px;
}

.progress.progress-sm {
  height: 12px;
}

.progress.progress-sm .progress-bar {
  line-height: 10px;
  font-size: 11px;
}

.progress.progress-xs {
  height: 9px;
}

.progress.progress-xs .progress-bar {
  line-height: 8px;
  font-size: 11px;
}

.progress.progress-xxs {
  height: 4px;
}

.progress.progress-xxs .progress-bar {
  line-height: 4px;
  font-size: 0;
}

.progress.progress-right .progress-bar {
  float: left;
}

.progress.progress-shadowed {
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.progress.progress-no-radius {
  -webkit-border-radius: 0 !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 0 !important;
  -moz-background-clip: padding !important;
  border-radius: 0 !important;
  background-clip: padding-box !important;
}

.progress.progress-vertical {
  width: 25px;
  height: 100%;
  min-height: 150px;
  margin-left: 20px;
  display: inline-block;
  margin-bottom: 0;
}

.progress.progress-vertical .progress-bar {
  position: absolute;
  width: 25px;
  overflow: hidden;
  line-height: 20px;
  height: 0;
  -webkit-transition: height 0.5s ease;
  -moz-transition: height 0.5s ease;
  -o-transition: height 0.5s ease;
  transition: height 0.5s ease;
}

.progress.progress-vertical .progress-bar span {
  width: 100%;
  font-size: 12px;
  text-align: center;
}

.progress.progress-vertical.progress-bottom {
  position: relative;
}

.progress.progress-vertical.progress-bottom .progress-bar {
  position: absolute;
  bottom: 0;
}

.progress.progress-vertical.progress-bottom .progress-bar span {
  position: absolute;
  right: 0;
  bottom: 0;
}

.progress.progress-vertical.progress-xlg {
  width: 40px;
}

.progress.progress-vertical.progress-xlg .progress-bar {
  width: 40px;
}

.progress.progress-vertical.progress-lg {
  width: 30px;
}

.progress.progress-vertical.progress-lg .progress-bar {
  width: 30px;
}

.progress.progress-vertical.progress-sm {
  width: 20px;
}

.progress.progress-vertical.progress-sm .progress-bar {
  width: 20px;
}

.progress.progress-vertical.progress-sm .progress-bar span {
  font-size: 8px;
}

.progress.progress-vertical.progress-xs {
  width: 10px;
}

.progress.progress-vertical.progress-xs .progress-bar {
  width: 10px;
}

.progress.progress-vertical.progress-xs .progress-bar span {
  font-size: 0;
}

.progress.progress-vertical.progress-xxs {
  width: 5px;
}

.progress.progress-vertical.progress-xxs .progress-bar {
  width: 5px;
}

.progress.progress-vertical.progress-xxs .progress-bar span {
  font-size: 0;
}

.progress.progress-vertical.progress-bordered {
  width: 31px;
}

.progress.progress-vertical.progress-bordered.progress-bottom .progress-bar {
  bottom: 3px;
}

.progress.progress-vertical.progress-bordered.progress-xlg {
  width: 48px;
}

.progress.progress-vertical.progress-bordered.progress-lg {
  width: 38px;
}

.progress.progress-vertical.progress-bordered.progress-sm {
  width: 28px;
}

.progress.progress-vertical.progress-bordered.progress-xs {
  width: 18px;
}

.progress.progress-vertical.progress-bordered.progress-xxs {
  width: 13px;
}

.progress.progress-bordered {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 3px;
  height: 24px;
}

.progress.progress-bordered.progress-xlg {
  height: 32px;
}

.progress.progress-bordered.progress-lg {
  height: 28px;
}

.progress.progress-bordered.progress-sm {
  height: 18px;
}

.progress.progress-bordered.progress-xs {
  height: 15px;
}

.progress.progress-bordered.progress-xxs {
  height: 10px;
}

.progress-bar {
  background-color: var(--main-color);
}

.progress-bar-danger {
  background-color: #d73d32 !important;
}

.progress-bar-success {
  background-color: #53a93f !important;
}

.progress-bar-warning {
  background-color: #f4b400 !important;
}

.progress-bar-silver {
  background-color: #777 !important;
}

.progress-bar-inverse {
  background-color: #444 !important;
}

.progress-bar-blue {
  background-color: #5db2ff !important;
}

.progress-bar-info {
  background-color: #57b5e3 !important;
}

.progress-bar-azure {
  background-color: var(--main-color);
}

.progress-bar-sky {
  background-color: #11a9cc !important;
}

.progress-bar-blueberry {
  background-color: #6f85bf !important;
}

.progress-bar-palegreen {
  background-color: #a0d468 !important;
}

.progress-bar-orange {
  background-color: #fb6e52 !important;
}

.progress-bar-darkorange {
  background-color: #ed4e2a !important;
}

.progress-bar-magenta {
  background-color: #bc5679 !important;
}

.progress-bar-purple {
  background-color: #7e3794 !important;
}

.progress-bar-maroon {
  background-color: #981b48 !important;
}

.progress-striped .progress-bar {
  background-image: 8121991;
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

/*#region Wells*/
.well {
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: transparent;
  border: 0;
  color: #444;
  position: relative;
  margin-bottom: 30px;
  min-height: 0px;
  box-shadow: none;
}

.well.attached {
  position: relative;
  top: -1px;
  bottom: -1px;
  border-radius: 0;
  margin: 0;
  box-shadow: 0 0 0 1px #d5d5d5;
}

.well.attached.top {
  top: 0;
  bottom: -1px;
  margin-top: 1em;
  margin-bottom: 0;
  -webkit-border-radius: 3px 3px 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 3px 0 0;
  -moz-background-clip: padding;
  border-radius: 3px 3px 0 0;
  background-clip: padding-box;
  border-bottom: 0;
}

.well.attached.bottom {
  top: -1px;
  bottom: 0;
  margin-top: 0;
  margin-bottom: 1em;
  -webkit-border-radius: 0 0 3px 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 0 3px 3px;
  -moz-background-clip: padding;
  border-radius: 0 0 3px 3px;
  background-clip: padding-box;
  border-top: 0;
}

.well.attached.bottom:last-child {
  margin-bottom: 0;
}

.well.bordered-top {
  border-top: 5px solid var(--main-color) !important;
}

.well.bordered-bottom {
  border-bottom: 5px solid var(--main-color);
}

.well.bordered-left {
  border-right: 5px solid var(--main-color);
}

.well.bordered-right {
  border-left: 5px solid var(--main-color);
}

.well[class*=bg-] {
  color: #f5f5f5;
}

.well h1,
.well h2,
.well h3,
.well h4,
.well h5,
.well h6 {
  margin-top: 0;
}

.well h1,
.well h2,
.well h3 {
  line-height: 36px;
}

.well.with-header {
  padding-top: 60px;
}

.well.with-footer {
  padding-bottom: 60px;
}

.well .header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 10px;
  text-align: right;
  border-radius: 2px 2px 0 0;
  border-bottom: 1px solid #e5e5e5;
}

.well .header[class*=bg-] {
  color: #fff;
  border-bottom: 0;
}

.well .header[class*=bordered-] {
  border-bottom: 3px solid #fff;
}

.well .footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 10px;
  border-top: 1px solid #e5e5e5;
  border-radius: 0 0 2px 2px;
}

.well .footer[class*=bordered-] {
  border-top: 3px solid #fff;
}

.well hr.wide {
  margin-right: -19px;
  margin-left: -19px;
}

/*#region PopOvers*/
.popover {
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  padding: 0;
  border-color: #ccc;
  border-width: 1px;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: #444;
  background-color: #fbfbfb;
}

.popover .popover.bottom .arrow:after {
  top: 1px;
  margin-right: -10px;
  border-bottom-color: #f7f7f7;
  border-top-width: 0;
}

.popover.inverted {
  background-color: #262626;
  color: #f5f5f5;
}

.popover.inverted .popover-title {
  background-color: #262626;
  color: #f5f5f5;
}

.popover.inverted.top .arrow:after {
  border-top-color: #262626;
}

.popover.inverted.bottom .arrow:after {
  border-bottom-color: #262626;
}

.popover.inverted.left .arrow:after {
  border-right-color: #262626;
}

.popover.inverted.right .arrow:after {
  border-left-color: #262626;
}

.popover.dark {
  background-color: #e5e5e5;
}

.popover.dark .popover-title {
  background-color: #e5e5e5;
}

.popover.dark.top .arrow:after {
  border-top-color: #e5e5e5;
}

.popover.dark.bottom .arrow:after {
  border-bottom-color: #e5e5e5;
}

.popover.dark.left .arrow:after {
  border-right-color: #e5e5e5;
}

.popover.dark.right .arrow:after {
  border-left-color: #e5e5e5;
}

.popover-title {
  -webkit-border-radius: 3px 3px 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px 3px 0 0;
  -moz-background-clip: padding;
  border-radius: 3px 3px 0 0;
  background-clip: padding-box;
  color: #000;
  border-bottom: 3px solid var(--main-color);
}

.popover-notitle + .popover .popover-title {
  display: none;
}

.popover-notitle + .popover.top .arrow:after {
  border-top-color: #fff;
}

.popover-notitle + .popover.bottom .arrow:after {
  border-bottom-color: #fff;
}

.popover-notitle + .popover.left .arrow:after {
  border-right-color: #fff;
}

.popover-notitle + .popover.right .arrow:after {
  border-right-color: #fff;
}

/*#region ToolTips*/
.tooltip.in {
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #262626;
}

.tooltip.right .tooltip-arrow {
  border-left-color: #262626;
}

.tooltip.left .tooltip-arrow {
  border-right-color: #262626;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #262626;
}

.tooltip-lg + .tooltip > .tooltip-inner {
  font-size: 15px !important;
}

.tooltip-inner {
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
  -webkit-box-shadow: 1px 1px rgba(229, 229, 229, 0.5);
  -moz-box-shadow: 1px 1px rgba(229, 229, 229, 0.5);
  box-shadow: 1px 1px rgba(229, 229, 229, 0.5);
  -webkit-transition: visibility 0, opacity 0.13s ease-in;
  -moz-transition: visibility 0, opacity 0.13s ease-in;
  -o-transition: visibility 0, opacity 0.13s ease-in;
  transition: visibility 0, opacity 0.13s ease-in;
  background-color: #262626;
  border: 1px solid #262626;
  color: #aaa;
  padding: 8px 8px;
  font-size: 13px;
}

.tooltip-white + .tooltip > .tooltip-inner {
  border: 1px solid #fff;
  background-color: #fff;
  color: #262626;
}

.tooltip-white + .tooltip.top .tooltip-arrow {
  border-top-color: #fff;
}

.tooltip-white + .tooltip.right .tooltip-arrow {
  border-left-color: #fff;
}

.tooltip-white + .tooltip.left .tooltip-arrow {
  border-right-color: #fff;
}

.tooltip-white + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #fff;
}

.tooltip-whitesmoke + .tooltip > .tooltip-inner {
  border: 1px solid #f5f5f5;
  background-color: #f5f5f5;
  color: #262626;
}

.tooltip-whitesmoke + .tooltip.top .tooltip-arrow {
  border-top-color: #f5f5f5;
}

.tooltip-whitesmoke + .tooltip.right .tooltip-arrow {
  border-left-color: #f5f5f5;
}

.tooltip-whitesmoke + .tooltip.left .tooltip-arrow {
  border-right-color: #f5f5f5;
}

.tooltip-whitesmoke + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #f5f5f5;
}

.tooltip-snow + .tooltip > .tooltip-inner {
  border: 1px solid #fbfbfb;
  background-color: #fbfbfb;
  color: #262626;
}

.tooltip-snow + .tooltip.top .tooltip-arrow {
  border-top-color: #fbfbfb;
}

.tooltip-snow + .tooltip.right .tooltip-arrow {
  border-left-color: #fbfbfb;
}

.tooltip-snow + .tooltip.left .tooltip-arrow {
  border-right-color: #fbfbfb;
}

.tooltip-snow + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #fbfbfb;
}

.tooltip-seashell + .tooltip > .tooltip-inner {
  border: 1px solid #f3f3f3;
  background-color: #f3f3f3;
  color: #262626;
}

.tooltip-seashell + .tooltip.top .tooltip-arrow {
  border-top-color: #f3f3f3;
}

.tooltip-seashell + .tooltip.right .tooltip-arrow {
  border-left-color: #f3f3f3;
}

.tooltip-seashell + .tooltip.left .tooltip-arrow {
  border-right-color: #f3f3f3;
}

.tooltip-seashell + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #f3f3f3;
}

.tooltip-ivory + .tooltip > .tooltip-inner {
  border: 1px solid #eee;
  background-color: #eee;
  color: #262626;
}

.tooltip-ivory + .tooltip.top .tooltip-arrow {
  border-top-color: #eee;
}

.tooltip-ivory + .tooltip.right .tooltip-arrow {
  border-left-color: #eee;
}

.tooltip-ivory + .tooltip.left .tooltip-arrow {
  border-right-color: #eee;
}

.tooltip-ivory + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #eee;
}

.tooltip-platinum + .tooltip > .tooltip-inner {
  border: 1px solid #e5e5e5;
  background-color: #e5e5e5;
  color: #262626;
}

.tooltip-platinum + .tooltip.top .tooltip-arrow {
  border-top-color: #e5e5e5;
}

.tooltip-platinum + .tooltip.right .tooltip-arrow {
  border-left-color: #e5e5e5;
}

.tooltip-platinum + .tooltip.left .tooltip-arrow {
  border-right-color: #e5e5e5;
}

.tooltip-platinum + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #e5e5e5;
}

.tooltip-lightgray + .tooltip > .tooltip-inner {
  border: 1px solid #d0d0d0;
  background-color: #d0d0d0;
  color: #262626;
}

.tooltip-lightgray + .tooltip.top .tooltip-arrow {
  border-top-color: #d0d0d0;
}

.tooltip-lightgray + .tooltip.right .tooltip-arrow {
  border-left-color: #d0d0d0;
}

.tooltip-lightgray + .tooltip.left .tooltip-arrow {
  border-right-color: #d0d0d0;
}

.tooltip-lightgray + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #d0d0d0;
}

.tooltip-gray + .tooltip > .tooltip-inner {
  border: 1px solid #ccc;
  background-color: #ccc;
  color: #262626;
}

.tooltip-gray + .tooltip.top .tooltip-arrow {
  border-top-color: #ccc;
}

.tooltip-gray + .tooltip.right .tooltip-arrow {
  border-left-color: #ccc;
}

.tooltip-gray + .tooltip.left .tooltip-arrow {
  border-right-color: #ccc;
}

.tooltip-gray + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #ccc;
}

.tooltip-darkgray + .tooltip > .tooltip-inner {
  border: 1px solid #999;
  background-color: #999;
  color: #262626;
}

.tooltip-darkgray + .tooltip.top .tooltip-arrow {
  border-top-color: #999;
}

.tooltip-darkgray + .tooltip.right .tooltip-arrow {
  border-left-color: #999;
}

.tooltip-darkgray + .tooltip.left .tooltip-arrow {
  border-right-color: #999;
}

.tooltip-darkgray + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #999;
}

.tooltip-silver + .tooltip > .tooltip-inner {
  border: 1px solid #777;
  background-color: #777;
  color: #fff;
}

.tooltip-silver + .tooltip.top .tooltip-arrow {
  border-top-color: #777;
}

.tooltip-silver + .tooltip.right .tooltip-arrow {
  border-left-color: #777;
}

.tooltip-silver + .tooltip.left .tooltip-arrow {
  border-right-color: #777;
}

.tooltip-silver + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #777;
}

.tooltip-sonic-silver + .tooltip > .tooltip-inner {
  border: 1px solid #737373;
  background-color: #737373;
  color: #fff;
}

.tooltip-sonic-silver + .tooltip.top .tooltip-arrow {
  border-top-color: #737373;
}

.tooltip-sonic-silver + .tooltip.right .tooltip-arrow {
  border-left-color: #737373;
}

.tooltip-sonic-silver + .tooltip.left .tooltip-arrow {
  border-right-color: #737373;
}

.tooltip-sonic-silver + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #737373;
}

.tooltip-storm-cloud + .tooltip > .tooltip-inner {
  border: 1px solid #666;
  background-color: #666;
  color: #fff;
}

.tooltip-storm-cloud + .tooltip.top .tooltip-arrow {
  border-top-color: #666;
}

.tooltip-storm-cloud + .tooltip.right .tooltip-arrow {
  border-left-color: #666;
}

.tooltip-storm-cloud + .tooltip.left .tooltip-arrow {
  border-right-color: #666;
}

.tooltip-storm-cloud + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #666;
}

.tooltip-lightcarbon + .tooltip > .tooltip-inner {
  border: 1px solid #555;
  background-color: #555;
  color: #fff;
}

.tooltip-lightcarbon + .tooltip.top .tooltip-arrow {
  border-top-color: #555;
}

.tooltip-lightcarbon + .tooltip.right .tooltip-arrow {
  border-left-color: #555;
}

.tooltip-lightcarbon + .tooltip.left .tooltip-arrow {
  border-right-color: #555;
}

.tooltip-lightcarbon + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #555;
}

.tooltip-carbon + .tooltip > .tooltip-inner {
  border: 1px solid #444;
  background-color: #444;
  color: #fff;
}

.tooltip-carbon + .tooltip.top .tooltip-arrow {
  border-top-color: #444;
}

.tooltip-carbon + .tooltip.right .tooltip-arrow {
  border-left-color: #444;
}

.tooltip-carbon + .tooltip.left .tooltip-arrow {
  border-right-color: #444;
}

.tooltip-carbon + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #444;
}

.tooltip-slate-gray + .tooltip > .tooltip-inner {
  border: 1px solid #333;
  background-color: #333;
  color: #fff;
}

.tooltip-slate-gray + .tooltip.top .tooltip-arrow {
  border-top-color: #333;
}

.tooltip-slate-gray + .tooltip.right .tooltip-arrow {
  border-left-color: #333;
}

.tooltip-slate-gray + .tooltip.left .tooltip-arrow {
  border-right-color: #333;
}

.tooltip-slate-gray + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #333;
}

.tooltip-darkcarbon + .tooltip > .tooltip-inner {
  border: 1px solid #262626;
  background-color: #262626;
  color: #fff;
}

.tooltip-darkcarbon + .tooltip.top .tooltip-arrow {
  border-top-color: #262626;
}

.tooltip-darkcarbon + .tooltip.right .tooltip-arrow {
  border-left-color: #262626;
}

.tooltip-darkcarbon + .tooltip.left .tooltip-arrow {
  border-right-color: #262626;
}

.tooltip-darkcarbon + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #262626;
}

.tooltip-blue + .tooltip > .tooltip-inner {
  border: 1px solid #5db2ff;
  background-color: #5db2ff;
  color: #fff;
}

.tooltip-blue + .tooltip.top .tooltip-arrow {
  border-top-color: #5db2ff;
}

.tooltip-blue + .tooltip.right .tooltip-arrow {
  border-left-color: #5db2ff;
}

.tooltip-blue + .tooltip.left .tooltip-arrow {
  border-right-color: #5db2ff;
}

.tooltip-blue + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #5db2ff;
}

.tooltip-info + .tooltip > .tooltip-inner {
  border: 1px solid #57b5e3;
  background-color: #57b5e3;
  color: #fff;
}

.tooltip-info + .tooltip.top .tooltip-arrow {
  border-top-color: #57b5e3;
}

.tooltip-info + .tooltip.right .tooltip-arrow {
  border-left-color: #57b5e3;
}

.tooltip-info + .tooltip.left .tooltip-arrow {
  border-right-color: #57b5e3;
}

.tooltip-info + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #57b5e3;
}

.tooltip-sky + .tooltip > .tooltip-inner {
  border: 1px solid #11a9cc;
  background-color: #11a9cc;
  color: #fff;
}

.tooltip-sky + .tooltip.top .tooltip-arrow {
  border-top-color: #11a9cc;
}

.tooltip-sky + .tooltip.right .tooltip-arrow {
  border-left-color: #11a9cc;
}

.tooltip-sky + .tooltip.left .tooltip-arrow {
  border-right-color: #11a9cc;
}

.tooltip-sky + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #11a9cc;
}

.tooltip-primary + .tooltip > .tooltip-inner {
  border: 1px solid #4374e0;
  background-color: #4374e0;
  color: #fff;
}

.tooltip-primary + .tooltip.top .tooltip-arrow {
  border-top-color: #4374e0;
}

.tooltip-primary + .tooltip.right .tooltip-arrow {
  border-left-color: #4374e0;
}

.tooltip-primary + .tooltip.left .tooltip-arrow {
  border-right-color: #4374e0;
}

.tooltip-primary + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #4374e0;
}

.tooltip-azure + .tooltip > .tooltip-inner {
  border: 1px solid var(--main-color);
  background-color: var(--main-color);
  color: #fff;
}

.tooltip-azure + .tooltip.top .tooltip-arrow {
  border-top-color: var(--main-color);
}

.tooltip-azure + .tooltip.right .tooltip-arrow {
  border-left-color: var(--main-color);
}

.tooltip-azure + .tooltip.left .tooltip-arrow {
  border-right-color: var(--main-color);
}

.tooltip-azure + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--main-color);
}

.tooltip-blueberry + .tooltip > .tooltip-inner {
  border: 1px solid #6f85bf;
  background-color: #6f85bf;
  color: #fff;
}

.tooltip-blueberry + .tooltip.top .tooltip-arrow {
  border-top-color: #6f85bf;
}

.tooltip-blueberry + .tooltip.right .tooltip-arrow {
  border-left-color: #6f85bf;
}

.tooltip-blueberry + .tooltip.left .tooltip-arrow {
  border-right-color: #6f85bf;
}

.tooltip-blueberry + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #6f85bf;
}

.tooltip-palegreen + .tooltip > .tooltip-inner {
  border: 1px solid #a0d468;
  background-color: #a0d468;
  color: #fff;
}

.tooltip-palegreen + .tooltip.top .tooltip-arrow {
  border-top-color: #a0d468;
}

.tooltip-palegreen + .tooltip.right .tooltip-arrow {
  border-left-color: #a0d468;
}

.tooltip-palegreen + .tooltip.left .tooltip-arrow {
  border-right-color: #a0d468;
}

.tooltip-palegreen + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #a0d468;
}

.tooltip-success + .tooltip > .tooltip-inner {
  border: 1px solid #53a93f;
  background-color: #53a93f;
  color: #fff;
}

.tooltip-success + .tooltip.top .tooltip-arrow {
  border-top-color: #53a93f;
}

.tooltip-success + .tooltip.right .tooltip-arrow {
  border-left-color: #53a93f;
}

.tooltip-success + .tooltip.left .tooltip-arrow {
  border-right-color: #53a93f;
}

.tooltip-success + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #53a93f;
}

.tooltip-green + .tooltip > .tooltip-inner {
  border: 1px solid #8cc474;
  background-color: #8cc474;
  color: #fff;
}

.tooltip-green + .tooltip.top .tooltip-arrow {
  border-top-color: #8cc474;
}

.tooltip-green + .tooltip.right .tooltip-arrow {
  border-left-color: #8cc474;
}

.tooltip-green + .tooltip.left .tooltip-arrow {
  border-right-color: #8cc474;
}

.tooltip-green + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #8cc474;
}

.tooltip-lightyellow + .tooltip > .tooltip-inner {
  border: 1px solid #f6d52e;
  background-color: #f6d52e;
  color: #fff;
}

.tooltip-lightyellow + .tooltip.top .tooltip-arrow {
  border-top-color: #f6d52e;
}

.tooltip-lightyellow + .tooltip.right .tooltip-arrow {
  border-left-color: #f6d52e;
}

.tooltip-lightyellow + .tooltip.left .tooltip-arrow {
  border-right-color: #f6d52e;
}

.tooltip-lightyellow + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #f6d52e;
}

.tooltip-yellow + .tooltip > .tooltip-inner {
  border: 1px solid #ffce55;
  background-color: #ffce55;
  color: #fff;
}

.tooltip-yellow + .tooltip.top .tooltip-arrow {
  border-top-color: #ffce55;
}

.tooltip-yellow + .tooltip.right .tooltip-arrow {
  border-left-color: #ffce55;
}

.tooltip-yellow + .tooltip.left .tooltip-arrow {
  border-right-color: #ffce55;
}

.tooltip-yellow + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #ffce55;
}

.tooltip-warning + .tooltip > .tooltip-inner {
  border: 1px solid #f4b400;
  background-color: #f4b400;
  color: #fff;
}

.tooltip-warning + .tooltip.top .tooltip-arrow {
  border-top-color: #f4b400;
}

.tooltip-warning + .tooltip.right .tooltip-arrow {
  border-left-color: #f4b400;
}

.tooltip-warning + .tooltip.left .tooltip-arrow {
  border-right-color: #f4b400;
}

.tooltip-warning + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #f4b400;
}

.tooltip-gold + .tooltip > .tooltip-inner {
  border: 1px solid #f9b256;
  background-color: #f9b256;
  color: #fff;
}

.tooltip-gold + .tooltip.top .tooltip-arrow {
  border-top-color: #f9b256;
}

.tooltip-gold + .tooltip.right .tooltip-arrow {
  border-left-color: #f9b256;
}

.tooltip-gold + .tooltip.left .tooltip-arrow {
  border-right-color: #f9b256;
}

.tooltip-gold + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #f9b256;
}

.tooltip-orange + .tooltip > .tooltip-inner {
  border: 1px solid #fb6e52;
  background-color: #fb6e52;
  color: #fff;
}

.tooltip-orange + .tooltip.top .tooltip-arrow {
  border-top-color: #fb6e52;
}

.tooltip-orange + .tooltip.right .tooltip-arrow {
  border-left-color: #fb6e52;
}

.tooltip-orange + .tooltip.left .tooltip-arrow {
  border-right-color: #fb6e52;
}

.tooltip-orange + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #fb6e52;
}

.tooltip-lightred + .tooltip > .tooltip-inner {
  border: 1px solid #e46f61;
  background-color: #e46f61;
  color: #fff;
}

.tooltip-lightred + .tooltip.top .tooltip-arrow {
  border-top-color: #e46f61;
}

.tooltip-lightred + .tooltip.right .tooltip-arrow {
  border-left-color: #e46f61;
}

.tooltip-lightred + .tooltip.left .tooltip-arrow {
  border-right-color: #e46f61;
}

.tooltip-lightred + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #e46f61;
}

.tooltip-darkorange + .tooltip > .tooltip-inner {
  border: 1px solid #ed4e2a;
  background-color: #ed4e2a;
  color: #fff;
}

.tooltip-darkorange + .tooltip.top .tooltip-arrow {
  border-top-color: #ed4e2a;
}

.tooltip-darkorange + .tooltip.right .tooltip-arrow {
  border-left-color: #ed4e2a;
}

.tooltip-darkorange + .tooltip.left .tooltip-arrow {
  border-right-color: #ed4e2a;
}

.tooltip-darkorange + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #ed4e2a;
}

.tooltip-red + .tooltip > .tooltip-inner {
  border: 1px solid #df5138;
  background-color: #df5138;
  color: #fff;
}

.tooltip-red + .tooltip.top .tooltip-arrow {
  border-top-color: #df5138;
}

.tooltip-red + .tooltip.right .tooltip-arrow {
  border-left-color: #df5138;
}

.tooltip-red + .tooltip.left .tooltip-arrow {
  border-right-color: #df5138;
}

.tooltip-red + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #df5138;
}

.tooltip-pink + .tooltip > .tooltip-inner {
  border: 1px solid #e75b8d;
  background-color: #e75b8d;
  color: #fff;
}

.tooltip-pink + .tooltip.top .tooltip-arrow {
  border-top-color: #e75b8d;
}

.tooltip-pink + .tooltip.right .tooltip-arrow {
  border-left-color: #e75b8d;
}

.tooltip-pink + .tooltip.left .tooltip-arrow {
  border-right-color: #e75b8d;
}

.tooltip-pink + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #e75b8d;
}

.tooltip-darkpink + .tooltip > .tooltip-inner {
  border: 1px solid #cc324b;
  background-color: #cc324b;
  color: #fff;
}

.tooltip-darkpink + .tooltip.top .tooltip-arrow {
  border-top-color: #cc324b;
}

.tooltip-darkpink + .tooltip.right .tooltip-arrow {
  border-left-color: #cc324b;
}

.tooltip-darkpink + .tooltip.left .tooltip-arrow {
  border-right-color: #cc324b;
}

.tooltip-darkpink + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #cc324b;
}

.tooltip-danger + .tooltip > .tooltip-inner {
  border: 1px solid #d73d32;
  background-color: #d73d32;
  color: #fff;
}

.tooltip-danger + .tooltip.top .tooltip-arrow {
  border-top-color: #d73d32;
}

.tooltip-danger + .tooltip.right .tooltip-arrow {
  border-left-color: #d73d32;
}

.tooltip-danger + .tooltip.left .tooltip-arrow {
  border-right-color: #d73d32;
}

.tooltip-danger + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #d73d32;
}

.tooltip-magenta + .tooltip > .tooltip-inner {
  border: 1px solid #bc5679;
  background-color: #bc5679;
  color: #fff;
}

.tooltip-magenta + .tooltip.top .tooltip-arrow {
  border-top-color: #bc5679;
}

.tooltip-magenta + .tooltip.right .tooltip-arrow {
  border-left-color: #bc5679;
}

.tooltip-magenta + .tooltip.left .tooltip-arrow {
  border-right-color: #bc5679;
}

.tooltip-magenta + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #bc5679;
}

.tooltip-purple + .tooltip > .tooltip-inner {
  border: 1px solid #7e3794;
  background-color: #7e3794;
  color: #fff;
}

.tooltip-purple + .tooltip.top .tooltip-arrow {
  border-top-color: #7e3794;
}

.tooltip-purple + .tooltip.right .tooltip-arrow {
  border-left-color: #7e3794;
}

.tooltip-purple + .tooltip.left .tooltip-arrow {
  border-right-color: #7e3794;
}

.tooltip-purple + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #7e3794;
}

.tooltip-maroon + .tooltip > .tooltip-inner {
  border: 1px solid #981b48;
  background-color: #981b48;
  color: #fff;
}

.tooltip-maroon + .tooltip.top .tooltip-arrow {
  border-top-color: #981b48;
}

.tooltip-maroon + .tooltip.right .tooltip-arrow {
  border-left-color: #981b48;
}

.tooltip-maroon + .tooltip.left .tooltip-arrow {
  border-right-color: #981b48;
}

.tooltip-maroon + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #981b48;
}

/*#region Notifications*/
.toast-title {
  font-weight: bold;
}

.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.toast-message a,
.toast-message label {
  color: #fff;
}

.toast-message a:hover {
  color: #ccc;
  text-decoration: none;
}

.toast-close-button {
  position: relative;
  left: -0.3em;
  top: -0.5em;
  float: left;
  font-size: 18px;
  font-family: "FontAwesome";
  font-weight: bold;
  color: #fff;
  -webkit-text-shadow: 0 1px 0 #fff;
  text-shadow: 0 1px 0 #fff;
  zoom: 1;
  filter: alpha(opacity=80);
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.toast-close-button:hover,
.toast-close-button:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  zoom: 1;
  filter: alpha(opacity=40);
  -webkit-opacity: 0.4;
  -moz-opacity: 0.4;
  opacity: 0.4;
}

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.toast-top-full-width {
  top: 0;
  left: 0;
  width: 100%;
}

.toast-bottom-full-width {
  bottom: 0;
  left: 0;
  width: 100%;
}

.toast-top-left {
  top: 12px;
  right: 12px;
}

.toast-top-right {
  top: 12px;
  left: 12px;
}

.toast-bottom-right {
  left: 12px;
  bottom: 12px;
}

.toast-bottom-left {
  bottom: 12px;
  right: 12px;
}

#toast-container {
  position: fixed;
  z-index: 999999;
}

#toast-container > div {
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  background-position: 15px center;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0 0 12px #999;
  -moz-box-shadow: 0 0 12px #999;
  box-shadow: 0 0 12px #999;
  color: #fff;
  zoom: 1;
  filter: alpha(opacity=80);
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}

#toast-container > :hover {
  -webkit-box-shadow: 0 0 12px #000;
  -moz-box-shadow: 0 0 12px #000;
  box-shadow: 0 0 12px #000;
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  cursor: pointer;
}

#toast-container > .toast {
  background-image: none !important;
}

#toast-container > .toast:before {
  position: fixed;
  font-family: FontAwesome;
  font-size: 24px;
  line-height: 18px;
  float: right;
  color: #fff;
  padding-left: 0.5em;
  margin: auto 0.5em auto -1.5em;
}

#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
  width: 96%;
  margin: auto;
}

.toast {
  background-color: #030303;
}

.toast-white {
  background-color: #fff !important;
}

.toast-snow {
  background-color: #fbfbfb !important;
}

.toast-whitesmoke {
  background-color: #f5f5f5 !important;
}

.toast-seashell {
  background-color: #f3f3f3 !important;
}

.toast-ivory {
  background-color: #eee !important;
}

.toast-platinum {
  background-color: #e5e5e5 !important;
}

.toast-lightgray {
  background-color: #d0d0d0 !important;
}

.toast-gray {
  background-color: #ccc !important;
}

.toast-darkgray {
  background-color: #999 !important;
}

.toast-silver {
  background-color: #777 !important;
}

.toast-sonic-silver {
  background-color: #737373 !important;
}

.toast-storm-cloud {
  background-color: #666 !important;
}

.toast-lightcarbon {
  background-color: #555 !important;
}

.toast-carbon {
  background-color: #444 !important;
}

.toast-slate-gray {
  background-color: #333 !important;
}

.toast-darkcarbon {
  background-color: #262626 !important;
}

.toast-blue {
  background-color: #5db2ff !important;
}

.toast-info {
  background-color: #57b5e3 !important;
}

.toast-sky {
  background-color: #11a9cc !important;
}

.toast-primary {
  background-color: #4374e0 !important;
}

.toast-blueberry {
  background-color: #6f85bf !important;
}

.toast-palegreen {
  background-color: #a0d468 !important;
}

.toast-success {
  background-color: #53a93f !important;
}

.toast-green {
  background-color: #8cc474 !important;
}

.toast-lightyellow {
  background-color: #f6d52e !important;
}

.toast-yellow {
  background-color: #ffce55 !important;
}

.toast-warning {
  background-color: #f4b400 !important;
}

.toast-gold {
  background-color: #f9b256 !important;
}

.toast-orange {
  background-color: #fb6e52 !important;
}

.toast-lightred {
  background-color: #e46f61 !important;
}

.toast-darkorange {
  background-color: #ed4e2a !important;
}

.toast-red {
  background-color: #df5138 !important;
}

.toast-danger {
  background-color: #d73d32 !important;
}

.toast-pink {
  background-color: #e75b8d !important;
}

.toast-darkpink {
  background-color: #cc324b !important;
}

.toast-magenta {
  background-color: #bc5679 !important;
}

.toast-purple {
  background-color: #7e3794 !important;
}

.toast-maroon {
  background-color: #981b48 !important;
}

/*Responsive Design*/
@media all and (max-width: 239px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }

  #toast-container .toast-close-button {
    left: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 240px) and (max-width: 479px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }

  #toast-container .toast-close-button {
    left: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 480px) and (max-width: 767px) {
  #toast-container > div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}
/*#region Modal*/
.modal-blue .modal-header {
  border-bottom: 3px solid #5db2ff;
}

.modal-danger .modal-header {
  border-bottom: 3px solid #d73d32;
}

.modal-success .modal-header {
  border-bottom: 3px solid #53a93f;
}

.modal-warning .modal-header {
  border-bottom: 3px solid #f4b400;
}

.modal-silver .modal-header {
  border-bottom: 3px solid #777;
}

.modal-inverse .modal-header {
  border-bottom: 3px solid #444;
}

.modal-blueberry .modal-header {
  border-bottom: 3px solid #6f85bf;
}

.modal-palegreen .modal-header {
  border-bottom: 3px solid #a0d468;
}

.modal-orange .modal-header {
  border-bottom: 3px solid #fb6e52;
}

.modal-darkorange .modal-header {
  border-bottom: 3px solid #ed4e2a;
}

.modal-magenta .modal-header {
  border-bottom: 3px solid #bc5679;
}

.modal-purple .modal-header {
  border-bottom: 3px solid #7e3794;
}

.modal-maroon .modal-header {
  border-bottom: 3px solid #981b48;
}

.modal-primary .modal-header {
  border-bottom: 3px solid #4374e0;
}

.modal-content {
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  color: #444;
  background-color: #fff;
  border: rgba(0, 0, 0, 0);
}

.modal-content .close {
  font-size: 26px;
}

.modal-footer {
  padding-top: 12px;
  padding-bottom: 14px;
  border-top: 0;
  background-color: #f5f5f5;
}

.modal-header {
  padding: 10px 15px 10px 20px;
  background-color: #f5f5f5;
}

.modal-header .close {
  font-size: 26px;
}

.modal-backdrop {
  background-color: #fff;
}

.modal-backdrop.in {
  zoom: 1;
  filter: alpha(opacity=75);
  -webkit-opacity: 0.75;
  -moz-opacity: 0.75;
  opacity: 0.75;
}

.modal-message .modal-dialog {
  width: 300px;
}

.modal-message .modal-body,
.modal-message .modal-footer,
.modal-message .modal-header,
.modal-message .modal-title {
  background: 0 0;
  border: none;
  margin: 0;
  padding: 0 20px;
  text-align: center !important;
}

.modal-message .modal-header {
  color: #fff;
  margin-bottom: 10px;
  padding: 15px 0 8px;
}

.modal-message .modal-header .fa,
.modal-message .modal-header .glyphicon,
.modal-message .modal-header .typcn,
.modal-message .modal-header .wi {
  font-size: 30px;
}

.modal-message .modal-title {
  font-size: 17px;
  color: #737373;
  margin-bottom: 3px;
}

.modal-message .modal-body {
  color: #737373;
}

.modal-message .modal-footer {
  margin: 25px 0 20px;
  padding-bottom: 10px;
}

.modal-message.modal-info .modal-header {
  color: #57b5e3;
  border-bottom: 3px solid #57b5e3;
}

.modal-message.modal-danger .modal-header {
  color: #d73d32;
  border-bottom: 3px solid #e46f61;
}

.modal-message.modal-warning .modal-header {
  color: #f4b400;
  border-bottom: 3px solid #ffce55;
}

.modal-message.modal-success .modal-header {
  color: #53a93f;
  border-bottom: 3px solid #a0d468;
}

/*#region DropDown*/
.dropdown-menu {
  border: 1px solid #ccc !important;
  -webkit-border-radius: 2px !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 2px !important;
  -moz-background-clip: padding !important;
  border-radius: 2px !important;
  background-clip: padding-box !important;
  -webkit-box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  -webkit-transition: opacity 0.218s;
  -moz-transition: opacity 0.218s;
  -o-transition: opacity 0.218s;
  transition: opacity 0.218s;
  margin: 1px 0 0;
  min-width: 170px;
  background: #fff;
}

.dropdown-menu .dropdown-icon {
  display: inline-block;
  font-size: 13px;
  margin-left: 5px;
}

.dropdown-menu > li > a {
  font-size: 13px;
  padding-left: 11px;
  padding-right: 11px;
  margin-bottom: 1px;
  margin-top: 1px;
}

.dropdown-menu > li > a .dropdown-expand {
  position: absolute;
  top: 5px;
  left: 10px;
  font-size: 13px;
}

.dropdown-menu > li > a .badge,
.dropdown-menu > li > a .label {
  font-size: 10px !important;
}

.dropdown-menu > li > a .label {
  padding: 3px 6px 5px 6px;
}

.dropdown-menu > .dropdown-menu {
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
}

.dropdown-menu > .dropdown-menu > a:after {
  margin-left: -5px;
}

.dropdown-menu .divider {
  background-color: #ebebeb;
  margin-bottom: -1px;
}

.dropdown-menu.pull-right {
  right: auto;
  left: 0;
}

.dropdown-menu.dropdown-arrow.pull-right:before {
  right: auto;
  left: 9px;
}

.dropdown-menu.dropdown-arrow:before {
  border-bottom: 7px solid #fff;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
  display: inline-block;
  right: 9px;
  position: absolute;
  top: -7px;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus,
.dropdown-menu li a:active,
.dropdown-menu li.active a,
.dropdown-menu li.active a:hover,
.dropdown-menu .dropdown-submenu:hover > a,
.nav-tabs .dropdown-menu li > a:focus {
  background: #ebebeb;
  color: #262626;
}

.dropdown-info li a:hover,
.dropdown-info li a:focus,
.dropdown-info li a:active,
.dropdown-info li.active a,
.dropdown-info li.active a:hover,
.dropdown-info .dropdown-submenu:hover > a,
.nav-tabs .dropdown-info li > a:focus {
  background: #57b5e3;
  color: #fff;
}

.dropdown-primary li a:hover,
.dropdown-primary li a:focus,
.dropdown-primary li a:active,
.dropdown-primary li.active a,
.dropdown-primary li.active a:hover,
.dropdown-primary .dropdown-submenu:hover > a,
.nav-tabs .dropdown-primary li > a:focus {
  background: #4374e0;
  color: #fff;
}

.dropdown-success li a:hover,
.dropdown-success li a:focus,
.dropdown-success li a:active,
.dropdown-success li.active a,
.dropdown-success li.active a:hover,
.dropdown-success .dropdown-submenu:hover > a,
.nav-tabs .dropdown-success li > a:focus {
  background: #53a93f;
  color: #fff;
}

.dropdown-warning li a:hover,
.dropdown-warning li a:focus,
.dropdown-warning li a:active,
.dropdown-warning li.active a,
.dropdown-warning li.active a:hover,
.dropdown-warning .dropdown-submenu:hover > a,
.nav-tabs .dropdown-warning li > a:focus {
  background: #f4b400;
  color: #fff;
}

.dropdown-danger li a:hover,
.dropdown-danger li a:focus,
.dropdown-danger li a:active,
.dropdown-danger li.active a,
.dropdown-danger li.active a:hover,
.dropdown-danger .dropdown-submenu:hover > a,
.nav-tabs .dropdown-danger li > a:focus {
  background: #d73d32;
  color: #fff;
}

.dropdown-inverse li a:hover,
.dropdown-inverse li a:focus,
.dropdown-inverse li a:active,
.dropdown-inverse li.active a,
.dropdown-inverse li.active a:hover,
.dropdown-inverse .dropdown-submenu:hover > a,
.nav-tabs .dropdown-inverse li > a:focus {
  background: #262626;
  color: #fff;
}

.dropdown-blue li a:hover,
.dropdown-blue li a:focus,
.dropdown-blue li a:active,
.dropdown-blue li.active a,
.dropdown-blue li.active a:hover,
.dropdown-blue .dropdown-submenu:hover > a,
.nav-tabs .dropdown-blue li > a:focus {
  background: #5db2ff;
  color: #fff;
}

.dropdown-blueberry li a:hover,
.dropdown-blueberry li a:focus,
.dropdown-blueberry li a:active,
.dropdown-blueberry li.active a,
.dropdown-blueberry li.active a:hover,
.dropdown-blueberry .dropdown-submenu:hover > a,
.nav-tabs .dropdown-blueberry li > a:focus {
  background: #6f85bf;
  color: #fff;
}

.dropdown-palegreen li a:hover,
.dropdown-palegreen li a:focus,
.dropdown-palegreen li a:active,
.dropdown-palegreen li.active a,
.dropdown-palegreen li.active a:hover,
.dropdown-palegreen .dropdown-submenu:hover > a,
.nav-tabs .dropdown-palegreen li > a:focus {
  background: #a0d468;
  color: #fff;
}

.dropdown-orange li a:hover,
.dropdown-orange li a:focus,
.dropdown-orange li a:active,
.dropdown-orange li.active a,
.dropdown-orange li.active a:hover,
.dropdown-orange .dropdown-submenu:hover > a,
.nav-tabs .dropdown-orange li > a:focus {
  background: #fb6e52;
  color: #fff;
}

.dropdown-darkorange li a:hover,
.dropdown-darkorange li a:focus,
.dropdown-darkorange li a:active,
.dropdown-darkorange li.active a,
.dropdown-darkorange li.active a:hover,
.dropdown-darkorange .dropdown-submenu:hover > a,
.nav-tabs .dropdown-darkorange li > a:focus {
  background: #ed4e2a;
  color: #fff;
}

.dropdown-magenta li a:hover,
.dropdown-magenta li a:focus,
.dropdown-magenta li a:active,
.dropdown-magenta li.active a,
.dropdown-magenta li.active a:hover,
.dropdown-magenta .dropdown-submenu:hover > a,
.nav-tabs .dropdown-magenta li > a:focus {
  background: #bc5679;
  color: #fff;
}

.dropdown-purple li a:hover,
.dropdown-purple li a:focus,
.dropdown-purple li a:active,
.dropdown-purple li.active a,
.dropdown-purple li.active a:hover,
.dropdown-purple .dropdown-submenu:hover > a,
.nav-tabs .dropdown-purple li > a:focus {
  background: #7e3794;
  color: #fff;
}

.dropdown-maroon li a:hover,
.dropdown-maroon li a:focus,
.dropdown-maroon li a:active,
.dropdown-maroon li.active a,
.dropdown-maroon li.active a:hover,
.dropdown-maroon .dropdown-submenu:hover > a,
.nav-tabs .dropdown-maroon li > a:focus {
  background: #981b48;
  color: #fff;
}

.dropdown-hover {
  position: relative;
}

.dropdown-hover:hover > .dropdown-menu {
  display: block;
  left: 100%;
  top: -2px;
}

.dropdown-hover.dropup:hover > .dropdown-menu {
  bottom: 0;
  top: auto;
}

/*#region Pagination*/
.pagination,
.pager li > a {
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
}

.pagination,
.pager {
  margin: 0;
}

.pagination > li > a,
.pager > li > a {
  color: #444;
  background-color: #fff;
  margin: 0 -1px 0 0;
  border-color: #ccc;
}

.pagination > li > a:hover,
.pager > li > a:hover {
  background-color: #ebebeb;
  border-color: #b8b8b8;
}

.pagination > li > a:focus,
.pager > li > a:focus,
.pagination > li > a:focus,
.pager > li > a:focus {
  background-color: #ebebeb;
  border-color: #b8b8b8;
}

.pagination > li.disabled > a,
.pager > li.disabled > a,
.pagination > li.disabled > a:hover,
.pager > li.disabled > a:hover {
  background-color: #f9f9f9;
  border-color: #d9d9d9;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  -webkit-border-radius: 0 2px 2px 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 2px 2px 0;
  -moz-background-clip: padding;
  border-radius: 0 2px 2px 0;
  background-clip: padding-box;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  -webkit-border-radius: 2px 0 0 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px 0 0 2px;
  -moz-background-clip: padding;
  border-radius: 2px 0 0 2px;
  background-clip: padding-box;
}

.pagination > li > a,
.pager > li > a,
.pagination > li > span,
.pager > li > span {
  border-width: 1px;
}

.pagination > li.active > a,
.pagination > li.active > a:hover {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
  -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 7px 16px;
  font-size: 16px;
}

/*#region Tables*/
.table {
  background-color: #fff;
  margin-bottom: 0;
}

.table tfoot > tr > th {
  font-weight: 300;
}

.table thead > tr > th {
  border-bottom: 0;
  font-size: 13px;
  font-weight: 600;
}

.table thead[class*=colored-] > tr > th {
  color: #fff;
  font-weight: 400;
}

.table thead.colored-blue > tr > th {
  background-color: #5db2ff;
}

.table thead.colored-primary > tr > th {
  background-color: #4374e0;
}

.table thead.colored-danger > tr > th {
  background-color: #d73d32;
}

.table thead.colored-success > tr > th {
  background-color: #53a93f;
}

.table thead.colored-warning > tr > th {
  background-color: #f4b400;
}

.table thead.colored-silver > tr > th {
  background-color: #777;
}

.table thead.colored-inverse > tr > th {
  background-color: #444;
}

.table thead.colored-blueberry > tr > th {
  background-color: #6f85bf;
}

.table thead.colored-palegreen > tr > th {
  background-color: #a0d468;
}

.table thead.colored-orange > tr > th {
  background-color: #fb6e52;
}

.table thead.colored-darkorange > tr > th {
  background-color: #ed4e2a;
}

.table thead.colored-magenta > tr > th {
  background-color: #bc5679;
}

.table thead.colored-purple > tr > th {
  background-color: #7e3794;
}

.table thead.colored-maroon > tr > th {
  background-color: #981b48;
}

.table thead.bordered-blue > tr > th {
  border-bottom: 3px solid #5db2ff;
}

.table thead.bordered-primary > tr > th {
  border-bottom: 3px solid #4374e0;
}

.table thead.bordered-danger > tr > th {
  border-bottom: 3px solid #d73d32;
}

.table thead.bordered-success > tr > th {
  border-bottom: 3px solid #53a93f;
}

.table thead.bordered-warning > tr > th {
  border-bottom: 3px solid #f4b400;
}

.table thead.bordered-silver > tr > th {
  border-bottom: 3px solid #777;
}

.table thead.bordered-inverse > tr > th {
  border-bottom: 3px solid #444;
}

.table thead.bordered-blueberry > tr > th {
  border-bottom: 3px solid #6f85bf;
}

.table thead.bordered-palegreen > tr > th {
  border-bottom: 1px solid #dedede;
  color: #444;
  font-size: 14px;
}

.table thead.bordered-orange > tr > th {
  border-bottom: 3px solid #fb6e52;
}

.table thead.bordered-darkorange > tr > th {
  border-bottom: 3px solid #ed4e2a;
}

.table thead.bordered-magenta > tr > th {
  border-bottom: 3px solid #bc5679;
}

.table thead.bordered-purple > tr > th {
  border-bottom: 3px solid #7e3794;
}

.table thead.bordered-maroon > tr > th {
  border-bottom: 3px solid #981b48;
}

.table tr.success td:first-child {
  -webkit-box-shadow: 2px 0 0 #53a93f inset;
  -moz-box-shadow: 2px 0 0 #53a93f inset;
  box-shadow: 2px 0 0 #53a93f inset;
}

.table tr.danger td:first-child {
  -webkit-box-shadow: 2px 0 0 #d73d32 inset;
  -moz-box-shadow: 2px 0 0 #d73d32 inset;
  box-shadow: 2px 0 0 #d73d32 inset;
}

.table tr.warning td:first-child {
  -webkit-box-shadow: 2px 0 0 #f4b400 inset;
  -moz-box-shadow: 2px 0 0 #f4b400 inset;
  box-shadow: 2px 0 0 #f4b400 inset;
}

.table tr.active td:first-child {
  -webkit-box-shadow: 2px 0 0 #737373 inset;
  -moz-box-shadow: 2px 0 0 #737373 inset;
  box-shadow: 2px 0 0 #737373 inset;
}

.table tr td.success {
  -webkit-box-shadow: 2px 0 0 #53a93f inset;
  -moz-box-shadow: 2px 0 0 #53a93f inset;
  box-shadow: 2px 0 0 #53a93f inset;
}

.table tr td.danger {
  -webkit-box-shadow: 2px 0 0 #d73d32 inset;
  -moz-box-shadow: 2px 0 0 #d73d32 inset;
  box-shadow: 2px 0 0 #d73d32 inset;
}

.table tr td.warning {
  -webkit-box-shadow: 2px 0 0 #f4b400 inset;
  -moz-box-shadow: 2px 0 0 #f4b400 inset;
  box-shadow: 2px 0 0 #f4b400 inset;
}

.table tr td.active {
  -webkit-box-shadow: 2px 0 0 #737373 inset;
  -moz-box-shadow: 2px 0 0 #737373 inset;
  box-shadow: 2px 0 0 #737373 inset;
}

.table > thead > tr > .active,
.table > tbody > tr > .active,
.table > tfoot > tr > .active,
.table > thead > .active > td,
.table > tbody > .active > td,
.table > tfoot > .active > td,
.table > thead > .active > th,
.table > tbody > .active > th,
.table > tfoot > .active > th,
.table-striped > tbody > tr.active:nth-child(odd) > td,
.table-striped > tbody > tr > .active:nth-child(odd) > th {
  background-color: #f1f1f1;
  color: #222;
}

.table-hover > tbody > tr > .active:hover,
.table-hover > tbody > .active:hover > td,
.table-hover > tbody > .active:hover > th,
.table-striped > tbody > tr.active:hover:nth-child(odd) > td,
.table-striped > tbody > tr > .active:hover:nth-child(odd) > th {
  background-color: #e5e5e5 !important;
}

.table > thead > tr > .success,
.table > tbody > tr > .success,
.table > tfoot > tr > .success,
.table > thead > .success > td,
.table > tbody > .success > td,
.table > tfoot > .success > td,
.table > thead > .success > th,
.table > tbody > .success > th,
.table > tfoot > .success > th {
  color: #119000;
}

.table > thead > tr > .danger,
.table > tbody > tr > .danger,
.table > tfoot > tr > .danger,
.table > thead > .danger > td,
.table > tbody > .danger > td,
.table > tfoot > .danger > td,
.table > thead > .danger > th,
.table > tbody > .danger > th,
.table > tfoot > .danger > th {
  color: #cd2929;
}

.table > thead > tr > .warning,
.table > tbody > tr > .warning,
.table > tfoot > tr > .warning,
.table > thead > .warning > td,
.table > tbody > .warning > td,
.table > tfoot > .warning > td,
.table > thead > .warning > th,
.table > tbody > .warning > th,
.table > tfoot > .warning > th {
  color: #fb6e52;
}

.table-scrollable {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #ddd;
}

.table-scrollable > .table {
  width: 100% !important;
  margin: 0 !important;
  margin-bottom: 0;
}

.table-scrollable > .table > thead > tr > th,
.table-scrollable > .table > tbody > tr > th,
.table-scrollable > .table > tfoot > tr > th,
.table-scrollable > .table > thead > tr > td,
.table-scrollable > .table > tbody > tr > td,
.table-scrollable > .table > tfoot > tr > td {
  white-space: nowrap;
}

.table-scrollable > .table-bordered {
  border: 0;
}

.table-scrollable > .table-bordered > thead > tr > th:first-child,
.table-scrollable > .table-bordered > tbody > tr > th:first-child,
.table-scrollable > .table-bordered > tfoot > tr > th:first-child,
.table-scrollable > .table-bordered > thead > tr > td:first-child,
.table-scrollable > .table-bordered > tbody > tr > td:first-child,
.table-scrollable > .table-bordered > tfoot > tr > td:first-child {
  border-right: 0;
}

.table-scrollable > .table-bordered > thead > tr > th:last-child,
.table-scrollable > .table-bordered > tbody > tr > th:last-child,
.table-scrollable > .table-bordered > tfoot > tr > th:last-child,
.table-scrollable > .table-bordered > thead > tr > td:last-child,
.table-scrollable > .table-bordered > tbody > tr > td:last-child,
.table-scrollable > .table-bordered > tfoot > tr > td:last-child {
  border-left: 0;
}

.table-scrollable > .table-bordered > thead > tr > th:last-child > td,
.table-scrollable > .table-bordered > tbody > tr > th:last-child > td,
.table-scrollable > .table-bordered > tfoot > tr > th:last-child > td,
.table-scrollable > .table-bordered > thead > tr > td:last-child > td,
.table-scrollable > .table-bordered > tbody > tr > td:last-child > td,
.table-scrollable > .table-bordered > tfoot > tr > td:last-child > td {
  border-bottom: 0;
}

.flip-scroll table {
  width: 100%;
}

@media only screen and (max-width: 800px) {
  .flip-scroll .flip-content:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }

  .flip-scroll html .flip-content {
    -ms-zoom: 1;
    zoom: 1;
  }

  .flip-scroll *:first-child + html .flip-content {
    -ms-zoom: 1;
    zoom: 1;
  }

  .flip-scroll table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    position: relative;
  }

  .flip-scroll th,
.flip-scroll td {
    margin: 0;
    vertical-align: top;
  }

  .flip-scroll th:last-child,
.flip-scroll td:last-child {
    border-bottom: 1px solid #ddd;
  }

  .flip-scroll th {
    border: 0 !important;
    border-left: 1px solid #ddd !important;
    font-size: 13px !important;
    padding: 5px;
    width: auto !important;
    display: block;
    text-align: left;
    border-bottom: 0;
    border-right: 0;
  }

  .flip-scroll td {
    display: block;
    min-height: 1.25em;
    text-align: right;
    border-top: 0 !important;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .flip-scroll thead {
    display: block;
    float: right;
  }

  .flip-scroll thead tr {
    display: block;
  }

  .flip-scroll thead.bordered-blue > tr > th {
    border-left: 3px solid #5db2ff !important;
  }

  .flip-scroll thead.bordered-primary > tr > th {
    border-left: 3px solid #4374e0 !important;
  }

  .flip-scroll thead.bordered-danger > tr > th {
    border-left: 3px solid #d73d32 !important;
  }

  .flip-scroll thead.bordered-success > tr > th {
    border-left: 3px solid #53a93f !important;
  }

  .flip-scroll thead.bordered-warning > tr > th {
    border-left: 3px solid #f4b400 !important;
  }

  .flip-scroll thead.bordered-silver > tr > th {
    border-left: 3px solid #777 !important;
  }

  .flip-scroll thead.bordered-inverse > tr > th {
    border-left: 3px solid #444 !important;
  }

  .flip-scroll thead.bordered-blueberry > tr > th {
    border-left: 3px solid #6f85bf !important;
  }

  .flip-scroll thead.bordered-palegreen > tr > th {
    border-left: 3px solid #a0d468 !important;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    height: 80px;
  }

  .flip-scroll thead.bordered-orange > tr > th {
    border-left: 3px solid #fb6e52 !important;
  }

  .flip-scroll thead.bordered-darkorange > tr > th {
    border-left: 3px solid #ed4e2a !important;
  }

  .flip-scroll thead.bordered-magenta > tr > th {
    border-left: 3px solid #bc5679 !important;
  }

  .flip-scroll thead.bordered-purple > tr > th {
    border-left: 3px solid #7e3794 !important;
  }

  .flip-scroll thead.bordered-maroon > tr > th {
    border-left: 3px solid #981b48 !important;
  }

  .flip-scroll tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
  }

  .flip-scroll tbody tr {
    display: inline-block;
    vertical-align: top;
    margin-right: -5px;
    border-right: 1px solid #ddd;
  }
}
.table-toolbar {
  padding: 10px 0;
}

.dropdown-checkboxes {
  padding: 5px;
}

.dropdown-checkboxes .checker {
  display: block;
  font-weight: 300;
  color: #333;
  margin: 0 4px;
  line-height: 24px;
}

.dropdown-checkboxes .checker input {
  margin-top: 5px;
}

.dropdown-checkboxes .checker span {
  padding-right: 5px;
}

.table input[type=checkbox] ~ .text,
.table input[type=radio] ~ .text {
  margin-left: -7px;
  margin-bottom: 0;
}

/*#region Nestable List*/
.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  max-width: 600px;
  list-style: none;
  line-height: 20px;
}

.dd.shadowed .dd-handle,
.dd.shadowed .dd2-content {
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.dd.bordered .dd-handle,
.dd.bordered .dd2-content {
  border: 1px solid #cfcfcf;
}

.dd.darker .dd-handle,
.dd.darker .dd2-content {
  background-color: #eee;
}

.dd.darker .dd2-handle,
.dd.darker .dd-dragel > li > .dd2-handle {
  background-color: #e5e5e5;
}

.dd-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dd-list > li > .dd-handle,
.dd-list > li > .dd2-content {
  /*#region colered List Item*/
}

.dd-list > li > .dd-handle[class*=bg-],
.dd-list > li > .dd2-content[class*=bg-] {
  color: #fff;
}

.dd-list .dd-list {
  padding-right: 30px;
}

.dd-collapsed .dd-list {
  display: none;
}

.dd-item,
.dd-empty,
.dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 20px;
  line-height: 20px;
}

.dd-handle,
.dd2-content {
  display: block;
  min-height: 38px;
  margin: 5px 0;
  padding: 8px 12px;
  background: #fff;
  color: #737373;
  font-size: 13px;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.dd-handle:hover,
.dd2-content:hover,
.dd-handle:hover,
.dd2-content:hover {
  color: #262626;
  background: #eee;
}

.dd-handle[class*=btn-],
.dd2-content[class*=btn-] {
  color: #fff;
  border: 0;
  padding: 9px 12px;
}

.dd-handle[class*=btn-]:hover,
.dd2-content[class*=btn-]:hover {
  opacity: 0.85;
  color: #fff;
}

.dd2-handle + .dd2-content,
.dd2-handle + .dd2-content[class*=btn-] {
  padding-right: 175px;
}

.dd-handle[class*=btn-]:hover,
.dd2-content[class*=btn-] .dd2-handle[class*=btn-]:hover + .dd2-content[class*=btn-] {
  color: #fff;
}

.dd-item > button:hover ~ .dd-handle[class*=btn-],
.dd-item > button:hover ~ .dd2-content[class*=btn-] {
  opacity: 0.85;
  color: #fff;
}

.dd2-handle:hover ~ .dd2-content {
  color: #262626;
  background: #f5f5f5;
}

.dd2-item.dd-item > button {
  margin-right: 38px;
}

.dd-item > button {
  display: block;
  position: relative;
  z-index: 1;
  cursor: pointer;
  float: right;
  width: 25px;
  height: 20px;
  margin: 5px 1px 5px 5px;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  font-weight: bold;
  top: 4px;
  right: 1px;
  color: #737373;
}

.dd-item > button:before {
  font-family: FontAwesome;
  content: "\f067";
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  text-indent: 0;
  font-weight: normal;
  font-size: 14px;
}

.dd-item > button[data-action=collapse]:before {
  content: "\f068";
}

.dd-item > button:hover {
  color: #737373;
}

.dd-item .dd-colored > button,
.dd-item.dd-colored > button:hover {
  color: #f5f5f5;
}

.dd-placeholder,
.dd-empty {
  margin: 5px 0;
  padding: 0;
  min-height: 30px;
  background: #f5f5f5;
  border: 1px dashed #d0d0d0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.dd-empty {
  border-color: #aaa;
  border-style: solid;
  background-color: #e5e5e5;
}

.dd-dragel {
  position: absolute;
  pointer-events: none;
  z-index: 999;
  zoom: 1;
  filter: alpha(opacity=80);
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.dd-dragel > li > .dd-handle {
  color: #000;
  background: #fbfbfb;
  border-right: 2px solid #444;
  position: relative;
}

.dd-dragel > .dd-item > .dd-handle {
  margin-top: 0;
}

/*#region Bordered List Item*/
.dd-list > li[class*=bordered-] {
  border-width: 0;
  padding: 0;
}

.dd-list > li[class*=bordered-] > .dd-handle {
  border-right: 2px solid;
  border-right-color: inherit;
}

.dd-list > li.bordered-blue > .dd-handle {
  border-right-color: #5db2ff;
}

.dd-list > li.bordered-primary > .dd-handle {
  border-right-color: #4374e0;
}

.dd-list > li.bordered-danger > .dd-handle {
  border-right-color: #d73d32;
}

.dd-list > li.bordered-warning > .dd-handle {
  border-right-color: #f4b400;
}

.dd-list > li.bordered-success > .dd-handle {
  border-right-color: #53a93f;
}

.dd-list > li.bordered-silver > .dd-handle {
  border-right-color: #777;
}

.dd-list > li.bordered-inverse > .dd-handle {
  border-right-color: #444;
}

.dd-list > li.bordered-blueberry > .dd-handle {
  border-right-color: #6f85bf;
}

.dd-list > li.bordered-palegreen > .dd-handle {
  border-right-color: #a0d468;
}

.dd-list > li.bordered-orange > .dd-handle {
  border-right-color: #fb6e52;
}

.dd-list > li.bordered-darkorange > .dd-handle {
  border-right-color: #ed4e2a;
}

.dd-list > li.bordered-magenta > .dd-handle {
  border-right-color: #bc5679;
}

.dd-list > li.bordered-purple > .dd-handle {
  border-right-color: #7e3794;
}

.dd-list > li.bordered-maroon > .dd-handle {
  border-right-color: #981b48;
}

/*#endregion Bordered List Item*/
.dd-list > li > .dd-handle .sticker {
  position: absolute;
  left: 0;
  top: 0;
}

.dd2-handle,
.dd-dragel > li > .dd2-handle {
  right: 0;
  top: 0;
  width: 38px;
  margin: 0;
  border-width: 1px 1px 0 0;
  text-align: center;
  padding: 0 !important;
  line-height: 38px;
  height: 38px;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}

.dd2-handle .normal-icon,
.dd-dragel > li > .dd2-handle .normal-icon,
.dd2-handle .drag-icon,
.dd-dragel > li > .dd2-handle .drag-icon {
  font-size: 16px;
}

.dd2-handle:hover,
.dd-dragel > li > .dd2-handle {
  background: #f3f3f3;
}

.dd-item > .dd2-handle .drag-icon {
  display: none;
}

.dd-dragel > .dd-item > .dd2-handle .drag-icon {
  display: inline;
}

.dd-dragel > .dd-item > .dd2-handle .normal-icon {
  display: none;
}

/*#region TreeView*/
.tree {
  padding-right: 14px;
  overflow: auto;
  position: relative;
}

.tree:before {
  width: 1px;
  z-index: 1;
  display: block;
  content: "";
  position: absolute;
  top: -21px;
  bottom: 16px;
  right: 0;
  /*border-left: 1px dotted #666666;*/
}

.tree.tree-solid-line {
  padding-right: 12px;
}

.tree.tree-solid-line:before {
  border-right: 1px solid #999;
}

.tree.tree-solid-line .tree-folder .tree-folder-content:before {
  border-right: 1px solid #999;
}

.tree.tree-no-line {
  padding-right: 0;
}

.tree.tree-no-line:before {
  display: none;
}

.tree.tree-no-line .tree-folder .tree-folder-content:before {
  display: none;
}

.tree .tree-folder {
  width: auto;
  min-height: 20px;
  cursor: pointer;
}

.tree .tree-folder .tree-folder-header {
  position: relative;
  min-height: 20px;
  line-height: 20px;
  min-width: 100px;
}

.tree .tree-folder .tree-folder-header:hover {
  background-color: #eee;
}

.tree .tree-folder .tree-folder-header .tree-folder-name {
  margin-right: 2px;
}

.tree .tree-folder img {
  margin-right: 4px;
}

.tree .tree-folder .tree-folder-content {
  margin-right: 23px;
  position: relative;
}

.tree .tree-folder .tree-folder-content:before {
  display: inline-block;
  content: "";
  position: absolute;
  width: 1px;
  z-index: 1;
  top: -9px;
  bottom: 16px;
  right: -12px;
  border-right: 1px dotted #666;
}

.tree .tree-item {
  position: relative;
  min-height: 20px;
  line-height: 20px;
  min-width: 100px;
  cursor: pointer;
}

.tree .tree-item:hover {
  background-color: #eee;
}

.tree .tree-item .tree-item-name {
  margin-right: 2px;
}

.tree .tree-folder,
.tree .tree-item {
  position: relative;
}

.tree .tree-folder:before,
.tree .tree-item:before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 14px;
  right: -13px;
  width: 18px;
  height: 0;
  border-top: 1px dotted #666;
  z-index: 1;
}

.tree .tree-selected {
  background-color: #eee;
  color: #262626;
}

.tree .tree-selected:hover {
  background-color: #e5e5e5;
}

.tree .tree-folder .tree-folder-header .tree-folder-name,
.tree .tree-item .tree-item-name {
  display: inline;
  z-index: 2;
}

.tree.tree-solid-line .tree-folder:before,
.tree.tree-solid-line .tree-item:before {
  border-top: 1px solid #999;
}

.tree.tree-no-line .tree-folder:before,
.tree.tree-no-line .tree-item:before {
  display: none;
}

.tree .tree-item,
.tree .tree-folder {
  border: 1px solid transparent;
}

.tree .tree-item,
.tree .tree-folder .tree-folder-header {
  margin: 0;
  padding: 4px 5px 6px 5px;
  color: #333;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.tree .tree-item .tree-item-name > i,
.tree .tree-folder .tree-folder-header > i {
  color: #666;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tree .tree-item.tree-selected i,
.tree .tree-item .tree-item-name i {
  margin-right: 2px;
  width: 14px;
  display: inline-block;
  text-align: center;
  margin-left: 1px;
  color: #262626;
}

.tree.tree-plus-minus .tree-folder-header .fa-folder-open:before {
  height: 16px;
  width: 16px;
  line-height: 16px;
  vertical-align: middle;
  display: inline-block;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAABWCAYAAADVJVbkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAM1JREFUeNrsmFsKxCAMRRtxSe5/Be4pnYF+lMEppiZUZ44fBQvmaF5eFFXdIkd+f0opZkqtVboBlgXWDaUteCSvnc55ArcsunLLeW5JhK+As5HDuBz/F3FR40RxQb7j8+dc5FFUrSHR3XT9SgYAYJULB9kCIFa2jF6hucfICzqvbEmdRUUWIVsAAADwH83uTkOyCa/eBdYNPR4D3ouajyF6MRcPgHwYF1rFcLVOk0UaCZCfDTIAAMgWZAsAL9kydIVmDyMEGdkSK1t2AQYAa5tGM0Yy5xYAAAAASUVORK5CYII=") no-repeat;
  /* For IE 6 and 7 */
  background-position: 0 -21px;
  content: "";
}

.tree.tree-plus-minus .tree-folder-header .fa-folder:before {
  height: 16px;
  width: 16px;
  line-height: 16px;
  vertical-align: middle;
  display: inline-block;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAABWCAYAAADVJVbkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAM1JREFUeNrsmFsKxCAMRRtxSe5/Be4pnYF+lMEppiZUZ44fBQvmaF5eFFXdIkd+f0opZkqtVboBlgXWDaUteCSvnc55ArcsunLLeW5JhK+As5HDuBz/F3FR40RxQb7j8+dc5FFUrSHR3XT9SgYAYJULB9kCIFa2jF6hucfICzqvbEmdRUUWIVsAAADwH83uTkOyCa/eBdYNPR4D3ouajyF6MRcPgHwYF1rFcLVOk0UaCZCfDTIAAMgWZAsAL9kydIVmDyMEGdkSK1t2AQYAa5tGM0Yy5xYAAAAASUVORK5CYII=") no-repeat;
  /* For IE 6 and 7 */
  background-position: 0 2px;
  content: "";
}

.ie .tree.tree-plus-minus .tree-folder-header .fa-folder:before,
.ie .tree.tree-plus-minus .tree-folder-header .fa-folder-open:before {
  margin-top: -5px;
}

.tree.tree-plus-minus .tree-folder-name {
  margin-right: 0 !important;
}

.tree .tree-actions {
  display: none;
  position: absolute;
  margin-top: 1px;
  left: 4px;
}

.tree .tree-item:hover .tree-actions,
.tree .tree-folder-header:hover .tree-actions {
  display: inline-block;
}

.tree .tree-actions > i {
  font-weight: 300;
  padding: 1px 3px;
  text-align: center;
  font-size: 14px;
  color: #333;
  margin-left: 6px;
  margin-top: 0;
  display: inline-block;
}

.tree .tree-actions > i:hover {
  font-weight: bold;
}

.tree-loading {
  color: var(--main-color);
  margin-right: 30px;
}

/*#region Wizards*/
.wizard {
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.wizard.wizard-tabbed {
  background: #fbfbfb;
}

.wizard.wizard-tabbed ul li {
  padding: 0 30px;
  background-color: #fbfbfb;
}

.wizard.wizard-tabbed ul li .chevron {
  display: none;
}

.wizard.wizard-tabbed ul li .chevron:before {
  display: none;
}

.wizard.wizard-tabbed ul li.complete {
  background-color: #fbfbfb;
}

.wizard.wizard-tabbed ul li.active {
  background: #fff;
}

.wizard.wizard-wired {
  padding-top: 10px;
  display: block;
  background: #fff;
  text-align: center;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-bottom: 1px solid #ddd;
}

.wizard.wizard-wired ul {
  display: table;
  width: 100%;
  position: relative;
}

.wizard.wizard-wired ul li {
  display: table-cell;
  text-align: center;
  background-color: #fff;
  width: 20%;
  padding: 0;
  margin: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.wizard.wizard-wired ul li .chevron {
  display: none;
}

.wizard.wizard-wired ul li .chevron:before {
  display: none;
}

.wizard.wizard-wired ul li.complete {
  background-color: #fff;
}

.wizard.wizard-wired ul li.complete .step:before {
  font-size: 22px;
  line-height: 36px;
}

.wizard.wizard-wired ul li.complete:hover {
  background-color: #fff;
}

.wizard.wizard-wired ul li.active {
  background-color: #fff;
}

.wizard.wizard-wired ul li .step {
  border-width: 2px;
  width: 40px;
  height: 40px;
  line-height: 34px;
  font-size: 15px;
  z-index: 2;
  background-color: #fff;
}

.wizard.wizard-wired ul li .title {
  display: block;
  margin-top: 4px;
  margin-bottom: 6px;
  max-width: 100%;
  font-size: 14px;
  line-height: 20px;
  z-index: 104;
  text-align: center;
  table-layout: fixed;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.wizard.wizard-wired ul li:before {
  display: block;
  content: "";
  width: 100%;
  height: 2px !important;
  font-size: 0;
  overflow: hidden;
  background-color: #e5e5e5;
  position: relative !important;
  top: 25px;
  z-index: 1 !important;
}

.wizard.wizard-wired ul li:first-child:before {
  max-width: 51%;
  right: 50%;
}

.wizard.wizard-wired ul li:last-child:before {
  max-width: 50%;
  width: 50%;
}

.wizard ul {
  list-style: none outside none;
  padding: 0;
  margin: 0;
  width: 4000px;
}

.wizard ul.previous-disabled li.complete {
  cursor: default;
}

.wizard ul.previous-disabled li.complete:hover {
  background: #f3f3f3;
  cursor: default;
}

.wizard ul.previous-disabled li.complete:hover .chevron:before {
  border-right-color: #f3f3f3;
}

.wizard ul li {
  float: right;
  margin: 0;
  padding: 0 20px 0 30px;
  line-height: 46px;
  position: relative;
  background: #f5f5f5;
  color: #d0d0d0;
  font-size: 16px;
  cursor: default;
  -webkit-transition: all 0.218s ease;
  -moz-transition: all 0.218s ease;
  -o-transition: all 0.218s ease;
  transition: all 0.218s ease;
}

.wizard ul li .step {
  border: 2px solid #e5e5e5;
  color: #ccc;
  font-size: 13px;
  border-radius: 100%;
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 20px;
  text-align: center;
  margin-left: 10px;
}

.wizard ul li .chevron {
  border: 24px solid transparent;
  border-right: 14px solid #d4d4d4;
  border-left: 0;
  display: block;
  position: absolute;
  left: -14px;
  top: 0;
  z-index: 1;
}

.wizard ul li .chevron:before {
  border: 24px solid transparent;
  border-right: 14px solid #f5f5f5;
  border-left: 0;
  content: "";
  display: block;
  position: absolute;
  left: 1px;
  top: -24px;
  -webkit-transition: all 0.218s ease;
  -moz-transition: all 0.218s ease;
  -o-transition: all 0.218s ease;
  transition: all 0.218s ease;
}

.wizard ul li.complete {
  background: #f5f5f5;
  color: #444;
}

.wizard ul li.complete:before {
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: -1px;
  height: 2px;
  max-height: 2px;
  overflow: hidden;
  background-color: #a0d468;
  z-index: 10000;
}

.wizard ul li.complete:hover {
  background: #eee;
  cursor: pointer;
}

.wizard ul li.complete:hover .chevron:before {
  border-right: 14px solid #eee;
}

.wizard ul li.complete .chevron:before {
  border-right: 14px solid #f5f5f5;
}

.wizard ul li.complete .step {
  color: #a0d468;
  border-color: #a0d468;
}

.wizard ul li.complete .step:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
  content: "\f00c";
  background-color: #fff;
  z-index: 3;
  font-family: FontAwesome;
  font-size: 12px;
  color: #a0d468;
}

.wizard ul li.active {
  background: #fff;
  color: #444;
}

.wizard ul li.active .step {
  border-color: var(--main-color);
  color: var(--main-color);
}

.wizard ul li.active:before {
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: -1px;
  height: 2px;
  max-height: 2px;
  overflow: hidden;
  background-color: var(--main-color);
  z-index: 10000;
}

.wizard ul li.active .chevron:before {
  border-right: 14px solid #fff;
}

.wizard ul li .badge {
  margin-left: 8px;
}

.wizard ul li:first-child {
  -webkit-border-radius: 2px 0 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px 0 0 0;
  -moz-background-clip: padding;
  border-radius: 2px 0 0 0;
  background-clip: padding-box;
  padding-right: 20px;
}

.actions a {
  line-height: 45px;
  font-size: 12px;
  margin-left: 8px;
}

.actions .btn-prev i {
  margin-left: 5px;
}

.actions .btn-next i {
  margin-right: 5px;
}

.actions.actions-footer {
  margin-top: -10px;
  position: relative;
  float: none;
  text-align: left;
  border: 0;
  background-color: #fff;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 100%;
  border-top: 1px solid #ddd;
}

.step-content {
  border-top: 0;
  -webkit-border-radius: 0 0 2px 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 0 2px 2px;
  -moz-background-clip: padding;
  border-radius: 0 0 2px 2px;
  background-clip: padding-box;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  min-height: 400px;
}

.step-content .step-pane {
  display: none;
}

.step-content .active {
  display: block;
}

.step-content .active .btn-group .active {
  display: inline-block;
}

/*#region Charts*/
.chart {
  height: 220px;
  margin: 5px;
}

.chart-sm {
  height: 100px;
}

.chart-lg {
  height: 250px;
}

.chart-xl {
  height: 350px;
}

#flotTip {
  padding: 3px 5px;
  background-color: #f5f5f5;
  z-index: 9999;
  color: #262626;
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  font-size: 13px;
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
  border: 1px solid #ccc;
}

#flotTip span {
  color: #5db2ff;
  font-weight: 700;
}

.flot-donut-caption {
  position: absolute;
  -lh-property: 0;
  top: -webkit-calc(50% - 20px);
  top: -moz-calc(50% - 20px);
  top: calc(50% - 20px);
  -lh-property: 0;
  right: -webkit-calc(50% - 25px);
  right: -moz-calc(50% - 25px);
  right: calc(50% - 25px);
}

flot-donut-caption .legendLabel span {
  display: block;
  margin: 0 5px;
}

.legendColorBox {
  padding-right: 10px;
  vertical-align: top;
  padding-top: 5px;
}

.legendColorBox div > div {
  width: 4px;
  height: 4px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.morris-hover.morris-default-style {
  -webkit-border-radius: 5px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 5px;
  -moz-background-clip: padding;
  border-radius: 5px;
  background-clip: padding-box;
  padding: 3px;
  color: #444;
  background: rgba(255, 255, 255, 0.8);
  border: solid 2px rgba(230, 230, 230, 0.8);
  font-family: sans-serif;
  font-size: 12px;
  text-align: center;
}

.morris-hover.morris-default-style .morris-hover-row-label {
  font-weight: 700;
  margin: 0.25em 0;
}

.morris-hover.morris-default-style .morris-hover-point {
  white-space: nowrap;
  margin: 0.1em 0;
}

.morris-hover {
  position: absolute;
  z-index: 1001;
}

.has-legend {
  margin-top: 30px !important;
}

.has-legend-unique {
  margin-top: 19px !important;
}

.easyPieChart {
  position: relative;
  text-align: center;
}

.easyPieChart canvas {
  position: absolute;
  top: 0;
  right: 0;
}

.easy-pie-chart {
  display: inline-block;
}

.easy-pie-chart .percent {
  color: #444;
  font-size: 12px;
  font-weight: 700;
}

.easy-pie-title {
  display: inline-block;
  margin: 10px 6px 0;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  width: 100px;
  height: 19px;
  white-space: nowrap;
  overflow: hidden;
}

.jqstooltip {
  padding: 7px !important;
  border-radius: 3px !important;
  border: 0 !important;
  background-color: #000 !important;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.jqstooltip .jqsfield {
  font-family: "Open Sans", "Segoe UI";
  font-size: 11px;
}

/*--------Forms--------*/
.form-bordered .form-group {
  border-top: 1px solid #e5e5e5;
  padding-top: 15px;
  margin-right: -12px;
  margin-left: -12px;
}

.form-bordered .form-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.form-bordered .form-group:last-child {
  margin-bottom: 0;
}

.form-title {
  display: block;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  font-size: 15px;
  font-weight: 300;
  color: #444;
  margin-bottom: 15px;
}

/*#region Form Label*/
label {
  font-weight: normal;
  font-size: 13px;
  vertical-align: middle;
}

/*#endregion Form Label*/
/*#region Form Text Input*/
textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color] {
  background-clip: padding-box !important;
  color: #858585;
  background-color: #fff;
  border: 1px solid #d5d5d5;
  font-family: inherit;
  -webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
  -moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
  -o-transition: box-shadow 0.45s, border-color 0.45s ease-in-out;
  transition: box-shadow 0.45s, border-color 0.45s ease-in-out;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

textarea:hover,
input[type=text]:hover,
input[type=password]:hover,
input[type=datetime]:hover,
input[type=datetime-local]:hover,
input[type=date]:hover,
input[type=month]:hover,
input[type=time]:hover,
input[type=week]:hover,
input[type=number]:hover,
input[type=email]:hover,
input[type=url]:hover,
input[type=search]:hover,
input[type=tel]:hover,
input[type=color]:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

textarea:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=time]:focus,
input[type=week]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=color]:focus {
  color: #262626;
  background-color: #fff;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.25);
  outline: 0;
}

.form-control,
select {
  font-size: 13px;
  color: #858585;
  background-color: #fff;
  border: 1px solid #d5d5d5;
  padding: 6px 12px;
  max-width: 550px;
}

.form-control:focus,
select:focus {
  color: #262626;
  background-color: #fff;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.25);
}

textarea.form-control {
  padding: 5px 9px;
  -webkit-transition: height 0.2s;
  -moz-transition: height 0.2s;
  -o-transition: height 0.2s;
  transition: height 0.2s;
}

.input-xs {
  height: 24px;
  padding: 2px 10px;
  font-size: 11px;
  line-height: 1.5;
}

.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.input-lg {
  font-weight: 300;
  font-size: 18px;
  height: 46px;
  padding: 10px 16px;
  line-height: 1.33;
}

.input-xl {
  height: 52px;
  padding: 12px 18px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #fbfbfb;
  border-color: #d5d5d5;
}

.form-control[disabled]:hover,
.form-control[readonly]:hover,
fieldset[disabled] .form-control:hover {
  border-color: #eee;
  background-color: #fff;
}

.form-group.has-success input,
.input-group.has-success input,
.form-group.has-success select,
.input-group.has-success select,
.form-group.has-success textarea,
.input-group.has-success textarea {
  border-color: #b0dd9c;
  color: #a0d468;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: #f3f7f1;
}

.form-group.has-success input:focus,
.input-group.has-success input:focus,
.form-group.has-success select:focus,
.input-group.has-success select:focus,
.form-group.has-success textarea:focus,
.input-group.has-success textarea:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #8cc474;
  border-color: #8cc474;
}

.form-group.has-success .form-control-feedback:before,
.input-group.has-success .form-control-feedback:before {
  color: #8cc474 !important;
  color: inherit;
}

.form-group.has-success .control-label,
.input-group.has-success .control-label,
.form-group.has-success .help-block,
.input-group.has-success .help-block,
.form-group.has-success .help-inline,
.input-group.has-success .help-inline {
  color: #8cc474;
}

.form-group.has-error input,
.input-group.has-error input,
.form-group.has-error .select,
.input-group.has-error .select,
.form-group.has-error textarea,
.input-group.has-error textarea {
  border-color: #e7bebe;
  color: #e46f61;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: snow;
}

.form-group.has-error input:focus,
.input-group.has-error input:focus,
.form-group.has-error .select:focus,
.input-group.has-error .select:focus,
.form-group.has-error textarea:focus,
.input-group.has-error textarea:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #d73d32;
  border-color: #e46f61;
}

.form-group.has-error .form-control-feedback:before,
.input-group.has-error .form-control-feedback:before {
  color: #e46f61 !important;
  color: inherit;
}

.form-group.has-error .control-label,
.input-group.has-error .control-label,
.form-group.has-error .help-block,
.input-group.has-error .help-block,
.form-group.has-error .help-inline,
.input-group.has-error .help-inline {
  color: #e46f61;
}

.form-group.has-warning input,
.input-group.has-warning input,
.form-group.has-warning .select,
.input-group.has-warning .select,
.form-group.has-warning textarea,
.input-group.has-warning textarea {
  border-color: #fecf49;
  color: #f4b400;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: #fefbf1;
}

.form-group.has-warning input:focus,
.input-group.has-warning input:focus,
.form-group.has-warning .select:focus,
.input-group.has-warning .select:focus,
.form-group.has-warning textarea:focus,
.input-group.has-warning textarea:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #f4b400;
  border-color: #f4b400;
}

.form-group.has-warning .form-control-feedback:before,
.input-group.has-warning .form-control-feedback:before {
  color: #f4b400 !important;
  color: inherit;
}

.form-group.has-warning .control-label,
.input-group.has-warning .control-label,
.form-group.has-warning .help-block,
.input-group.has-warning .help-block,
.form-group.has-warning .help-inline,
.input-group.has-warning .help-inline {
  color: #f4b400;
}

.form-group.has-info input,
.input-group.has-info input,
.form-group.has-info .select,
.input-group.has-info .select,
.form-group.has-info textarea,
.input-group.has-info textarea {
  border-color: #a4d3fe;
  color: #57b5e3;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: #f9fcff;
}

.form-group.has-info input:focus,
.input-group.has-info input:focus,
.form-group.has-info .select:focus,
.input-group.has-info .select:focus,
.form-group.has-info textarea:focus,
.input-group.has-info textarea:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #57b5e3;
  border-color: #57b5e3;
}

.form-group.has-info .form-control-feedback:before,
.input-group.has-info .form-control-feedback:before {
  color: #57b5e3 !important;
  color: inherit;
}

.form-group.has-info .control-label,
.input-group.has-info .control-label,
.form-group.has-info .help-block,
.input-group.has-info .help-block,
.form-group.has-info .help-inline,
.input-group.has-info .help-inline {
  color: #57b5e3;
}

span.input-icon {
  display: inline-block;
}

.input-icon {
  position: relative;
  width: 100%;
}

.input-icon.inverted > [class*=fa-],
.input-icon.inverted > [class*=glyphicon-] {
  color: #fff;
  background-color: #262626;
}

.input-icon > input {
  padding-right: 36px;
  padding-left: 6px;
}

.input-icon > input:focus + [class*=fa-],
.input-icon > input:focus + [class*=glyphicon-] {
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.input-icon > input:focus + .circular {
  -webkit-box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.15) inset;
  -moz-box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.15) inset;
}

.input-icon > input.input-xs {
  padding-right: 26px;
}

.input-icon > input.input-xs + [class*=fa-],
.input-icon > input.input-xs + [class*=glyphicon-] {
  width: 24px;
  font-size: 10px;
  padding-top: 0;
  line-height: 24px;
}

.input-icon > input.input-xs + .circular {
  width: 14px;
  height: 14px;
  font-size: 10px;
  line-height: 14px;
}

.input-icon > input.input-sm {
  padding-right: 32px;
}

.input-icon > input.input-sm + [class*=fa-],
.input-icon > input.input-sm + [class*=glyphicon-] {
  width: 30px;
  font-size: 12px;
  padding-top: 0;
  line-height: 30px;
}

.input-icon > input.input-sm + .circular {
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
}

.input-icon > input.input-lg {
  padding-right: 48px;
}

.input-icon > input.input-lg + [class*=fa-],
.input-icon > input.input-lg + [class*=glyphicon-] {
  width: 46px;
  font-size: 18px;
  padding-top: 5px;
  line-height: 34px;
}

.input-icon > input.input-lg + .circular {
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 26px;
}

.input-icon > input.input-xl {
  padding-right: 54px;
}

.input-icon > input.input-xl + [class*=fa-],
.input-icon > input.input-xl + [class*=glyphicon-] {
  width: 52px;
  font-size: 20px;
  padding-top: 8px;
  line-height: 34px;
}

.input-icon > input.input-xl + .circular {
  width: 42px;
  height: 42px;
  font-size: 20px;
  line-height: 26px;
}

.input-icon > [class*=fa-],
.input-icon > [class*=glyphicon-] {
  z-index: 2;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 34px;
  height: 100%;
  line-height: 28px;
  display: inline-block;
  color: #555;
  font-size: 14px;
  text-align: center;
  padding-top: 3px;
  zoom: 1;
  filter: alpha(opacity=70);
  -webkit-opacity: 0.7;
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.input-icon > [class*=fa-].circular,
.input-icon > [class*=glyphicon-].circular {
  border-radius: 500em !important;
  box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
  -webkit-transition: -webkit-box-shadow 0.3s ease;
  -moz-transition: -moz-box-shadow 0.3s ease;
  -o-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  padding: 0;
  top: 5px;
  bottom: 5px;
  right: 7px;
  width: 24px;
  height: 24px;
  font-size: 12px;
  line-height: 24px;
}

.input-icon.icon-right > input {
  padding-right: 6px;
  padding-left: 36px;
}

.input-icon.icon-right > input.input-xs {
  padding-left: 26px;
}

.input-icon.icon-right > input.input-sm {
  padding-left: 32px;
}

.input-icon.icon-right > input.input-lg {
  padding-left: 48px;
}

.input-icon.icon-right > input.input-xl {
  padding-left: 54px;
}

.input-icon.icon-right > [class*=fa-],
.input-icon.icon-right > [class*=glyphicon-] {
  right: auto;
  left: 0;
}

.input-icon.icon-right .circular {
  right: auto;
  left: 5px;
}

.input-icon ~ .help-inline {
  padding-right: 8px;
}

.input-group .input-group-addon {
  border-radius: 0 !important;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiZmJmYiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #eee 0, #fbfbfb 100%);
  background-image: -moz-linear-gradient(top, #eee 0, #fbfbfb 100%);
  background-image: -o-linear-gradient(top, #eee 0, #fbfbfb 100%);
  background-image: linear-gradient(to bottom, #eee 0, #fbfbfb 100%);
}

.input-group .input-group-addon[class*=bg-] {
  background-image: none;
  color: #fff;
}

.input-group-xl > .form-control,
.input-group-xl > .input-group-addon,
.input-group-xl > .input-group-btn > .btn {
  height: 52px;
  padding: 10px 18px;
  font-size: 20px;
  line-height: 1.4;
}

.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
  height: 24px;
  padding: 2px 6px 2px 7px;
  font-size: 11px;
  line-height: 1.4;
}

.has-success .input-group-addon {
  border-color: #b0dd9c !important;
  color: #8cc474;
  background-image: none;
}

.has-error .input-group-addon {
  border-color: #e7bebe;
  color: #e46f61;
  background-image: none;
}

.has-warning .input-group-addon {
  border-color: #fecf49;
  color: #f4b400;
  background-image: none;
}

.has-info .input-group-addon {
  border-color: #a4d3fe;
  color: #57b5e3;
  background-color: #e4f0fc;
  background-image: none;
}

.input-group-btn .btn-label {
  padding: 6px 10px !important;
}

.input-group-btn > .btn {
  line-height: 20px;
  border-radius: 0 !important;
}

.input-group-btn > .btn.dropdown-toggle > [class*=fa-] {
  margin-left: 0;
  font-size: 14px;
}

.input-group > .btn.btn-sm {
  line-height: 22px;
}

.input-group > .btn + .btn {
  margin-right: 1px;
}

.input-group > .btn-group > .btn {
  line-height: 23px;
}

.input-group > .btn-group > .btn.btn-sm {
  line-height: 26px;
}

.input-group > .btn > .caret,
.input-group > .btn-group > .btn > .caret,
.input-group > .btn.btn-sm > .caret,
.input-group > .btn-group > .btn.btn-sm > .caret {
  margin-top: 10px;
}

/*#region CheckBox and RadioBox*/
input[type=checkbox],
input[type=radio] {
  position: absolute;
  z-index: 12;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

input[type=checkbox].inverted:checked ~ .text:before,
input[type=radio].inverted:checked ~ .text:before {
  background-color: #333;
  border-color: #333;
  color: #fff;
}

input[type=checkbox].colored-white ~ .text,
input[type=radio].colored-white ~ .text {
  color: #fff;
}

input[type=checkbox].colored-white ~ .text:before,
input[type=radio].colored-white ~ .text:before {
  border-color: #fafafa;
}

input[type=checkbox].colored-white:checked ~ .text,
input[type=radio].colored-white:checked ~ .text {
  color: #fff;
}

input[type=checkbox].colored-white:checked ~ .text:before,
input[type=radio].colored-white:checked ~ .text:before {
  border-color: #333;
  color: #333;
}

input[type=checkbox].colored-blue:checked ~ .text,
input[type=radio].colored-blue:checked ~ .text {
  color: var(--main-color);
}

input[type=checkbox].colored-blue:checked ~ .text:before,
input[type=radio].colored-blue:checked ~ .text:before {
  border-color: var(--main-color);
  color: var(--main-color);
}

input[type=checkbox].colored-primary:checked ~ .text,
input[type=radio].colored-primary:checked ~ .text {
  color: #4374e0;
}

input[type=checkbox].colored-primary:checked ~ .text:before,
input[type=radio].colored-primary:checked ~ .text:before {
  border-color: #4374e0;
  color: #4374e0;
}

input[type=checkbox].colored-danger:checked ~ .text,
input[type=radio].colored-danger:checked ~ .text {
  color: #d73d32;
}

input[type=checkbox].colored-danger:checked ~ .text:before,
input[type=radio].colored-danger:checked ~ .text:before {
  border-color: #d73d32;
  color: #d73d32;
}

input[type=checkbox].colored-success:checked ~ .text,
input[type=radio].colored-success:checked ~ .text {
  color: #53a93f;
}

input[type=checkbox].colored-success:checked ~ .text:before,
input[type=radio].colored-success:checked ~ .text:before {
  border-color: #53a93f;
  color: #53a93f;
}

input[type=checkbox].colored-warning:checked ~ .text,
input[type=radio].colored-warning:checked ~ .text {
  color: #f4b400;
}

input[type=checkbox].colored-warning:checked ~ .text:before,
input[type=radio].colored-warning:checked ~ .text:before {
  border-color: #f4b400;
  color: #f4b400;
}

input[type=checkbox].colored-silver:checked ~ .text,
input[type=radio].colored-silver:checked ~ .text {
  color: #777;
}

input[type=checkbox].colored-silver:checked ~ .text:before,
input[type=radio].colored-silver:checked ~ .text:before {
  border-color: #777;
  color: #777;
}

input[type=checkbox].colored-blueberry:checked ~ .text,
input[type=radio].colored-blueberry:checked ~ .text {
  color: #6f85bf;
}

input[type=checkbox].colored-blueberry:checked ~ .text:before,
input[type=radio].colored-blueberry:checked ~ .text:before {
  border-color: #6f85bf;
  color: #6f85bf;
}

input[type=checkbox].colored-palegreen:checked ~ .text,
input[type=radio].colored-palegreen:checked ~ .text {
  color: #a0d468;
}

input[type=checkbox].colored-palegreen:checked ~ .text:before,
input[type=radio].colored-palegreen:checked ~ .text:before {
  border-color: #a0d468;
  color: #a0d468;
}

input[type=checkbox].colored-orange:checked ~ .text,
input[type=radio].colored-orange:checked ~ .text {
  color: #fb6e52;
}

input[type=checkbox].colored-orange:checked ~ .text:before,
input[type=radio].colored-orange:checked ~ .text:before {
  border-color: #fb6e52;
  color: #fb6e52;
}

input[type=checkbox].colored-darkorange:checked ~ .text,
input[type=radio].colored-darkorange:checked ~ .text {
  color: #ed4e2a;
}

input[type=checkbox].colored-darkorange:checked ~ .text:before,
input[type=radio].colored-darkorange:checked ~ .text:before {
  border-color: #ed4e2a;
  color: #ed4e2a;
}

input[type=checkbox].colored-magenta:checked ~ .text,
input[type=radio].colored-magenta:checked ~ .text {
  color: #bc5679;
}

input[type=checkbox].colored-magenta:checked ~ .text:before,
input[type=radio].colored-magenta:checked ~ .text:before {
  border-color: #bc5679;
  color: #bc5679;
}

input[type=checkbox].colored-purple:checked ~ .text,
input[type=radio].colored-purple:checked ~ .text {
  color: #7e3794;
}

input[type=checkbox].colored-purple:checked ~ .text:before,
input[type=radio].colored-purple:checked ~ .text:before {
  border-color: #7e3794;
  color: #7e3794;
}

input[type=checkbox].colored-maroon:checked ~ .text,
input[type=radio].colored-maroon:checked ~ .text {
  color: #981b48;
}

input[type=checkbox].colored-maroon:checked ~ .text:before,
input[type=radio].colored-maroon:checked ~ .text:before {
  border-color: #981b48;
  color: #981b48;
}

input[type=checkbox]:checked,
input[type=radio]:checked,
input[type=checkbox]:focus,
input[type=radio]:focus {
  outline: none !important;
}

input[type=checkbox]:checked ~ .text:before,
input[type=radio]:checked ~ .text:before {
  display: inline-block;
  content: "\f00c";
  background-color: #f5f8fc;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
  border-color: #333;
}

input[type=checkbox]:hover ~ .text :before,
input[type=radio]:hover ~ .text :before {
  border-color: #737373;
}

input[type=checkbox]:active ~ .text :before,
input[type=radio]:active ~ .text :before {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

input[type=checkbox]:disabled ~ .text,
input[type=radio]:disabled ~ .text,
input[type=checkbox][disabled] ~ .text,
input[type=radio][disabled] ~ .text,
input[type=checkbox].disabled ~ .text,
input[type=radio].disabled ~ .text {
  color: rgba(0, 0, 0, 0.4);
}

input[type=checkbox]:disabled ~ .text:before,
input[type=radio]:disabled ~ .text:before,
input[type=checkbox][disabled] ~ .text:before,
input[type=radio][disabled] ~ .text:before,
input[type=checkbox].disabled ~ .text:before,
input[type=radio].disabled ~ .text:before {
  background-color: #f5f5f5 !important;
  border-color: #e5e5e5 !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  color: #e5e5e5;
}

input[type=checkbox] ~ .text,
input[type=radio] ~ .text {
  position: relative;
  z-index: 11;
  display: inline-block;
  margin: 0;
  line-height: 20px;
  min-height: 18px;
  min-width: 18px;
  font-weight: normal;
}

input[type=checkbox] ~ .text:before,
input[type=radio] ~ .text:before {
  font-family: fontAwesome;
  font-weight: bold;
  font-size: 13px;
  color: #333;
  content: " ";
  background-color: #fafafa;
  border: 1px solid #c8c8c8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 0;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  height: 18px;
  line-height: 16px;
  min-width: 18px;
  margin-left: 5px;
  margin-bottom: 2px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

input[type=checkbox] ~ .text:hover:before,
input[type=radio] ~ .text:hover:before {
  border-color: #737373;
}

input[type=checkbox] ~ .text:active:before,
input[type=radio] ~ .text:active:before {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

input[type=radio] ~ .text:before {
  border-radius: 100%;
  font-size: 10px;
  font-family: FontAwesome;
  line-height: 17px;
  height: 19px;
  min-width: 19px;
}

input[type=radio]:checked ~ .text:before {
  content: "\f111";
}

.radio label,
.checkbox label {
  padding-right: 0;
}

.checkbox label {
  display: inline-flex;
}

/*#region Switches*/
input[type=checkbox].checkbox-slider {
  width: 55px;
  height: 25px;
  right: 0;
}

input[type=checkbox].checkbox-slider.slider-icon:checked ~ .text:after {
  font-family: FontAwesome;
  font-size: 15px;
  line-height: 21px;
  content: "\f00c";
  border-width: 1px;
  padding-right: 3px;
  background-color: #fff;
  color: #444;
}

input[type=checkbox].checkbox-slider.slider-icon ~ .text:after {
  font-family: FontAwesome;
  font-size: 14px;
  line-height: 20px;
  content: "\f00d";
  border-width: 1px;
  padding-right: 4px;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.toggle:checked ~ .text:after {
  background-color: #fff;
  color: #444;
}

input[type=checkbox].checkbox-slider.toggle ~ .text:after {
  border: 0;
  background-color: #444;
  width: 14px;
  height: 14px;
  top: 3px;
  right: 3px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

input[type=checkbox].checkbox-slider.yesno ~ .text:before {
  font-family: "Open Sans", "Segoe UI";
  content: "YES            NO";
}

input[type=checkbox].checkbox-slider ~ .text {
  margin: 0 4px;
  min-height: 24px;
}

input[type=checkbox].checkbox-slider ~ .text:before {
  font-family: "Open Sans", "Segoe UI";
  content: "ON           OFF";
  background-color: #fff;
  color: #999;
  font-weight: 300;
  font-size: 10px;
  line-height: 18px;
  height: 20px;
  overflow: hidden;
  border-radius: 50rem;
  border: 1px solid #d5d5d5;
  text-align: right;
  float: right;
  padding: 0;
  width: 52px;
  text-indent: -21px;
  margin-left: 0;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

input[type=checkbox].checkbox-slider ~ .text:after {
  font-family: "Open Sans", "Segoe UI";
  content: "";
  font-size: 10px;
  font-weight: 300;
  background-color: #fff;
  border: 5px solid #444;
  border-radius: 100%;
  width: 22px;
  height: 22px;
  line-height: 20px;
  position: absolute;
  top: -2px;
  right: -3px;
  padding: 0;
  -webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

input[type=checkbox].checkbox-slider:checked ~ .text:before {
  text-indent: 5px;
  background-color: #444;
  border-color: #444;
  color: #fff;
}

input[type=checkbox].checkbox-slider:checked ~ .text:after {
  right: 34px;
  background-color: #444;
  border: 5px solid #fff;
}

input[type=checkbox].checkbox-slider.colored-blue ~ .text:after {
  border-color: var(--main-color);
}

input[type=checkbox].checkbox-slider.colored-blue:checked ~ .text:before {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

input[type=checkbox].checkbox-slider.colored-blue:checked ~ .text:after {
  background-color: var(--main-color);
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-blue.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: var(--main-color);
}

input[type=checkbox].checkbox-slider.colored-blue.slider-icon ~ .text:after {
  border-color: #fff;
  color: var(--main-color);
}

input[type=checkbox].checkbox-slider.colored-blue.toggle:checked ~ .text:after {
  color: var(--main-color);
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-blue.toggle ~ .text:after {
  background-color: var(--main-color);
}

input[type=checkbox].checkbox-slider.colored-primary ~ .text:after {
  border-color: #4374e0;
}

input[type=checkbox].checkbox-slider.colored-primary:checked ~ .text:before {
  background-color: #4374e0;
  border-color: #4374e0;
}

input[type=checkbox].checkbox-slider.colored-primary:checked ~ .text:after {
  background-color: #4374e0;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-primary.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #4374e0;
}

input[type=checkbox].checkbox-slider.colored-primary.slider-icon ~ .text:after {
  border-color: #fff;
  color: #4374e0;
}

input[type=checkbox].checkbox-slider.colored-primary.toggle:checked ~ .text:after {
  color: #4374e0;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-primary.toggle ~ .text:after {
  background-color: #4374e0;
}

input[type=checkbox].checkbox-slider.colored-danger ~ .text:after {
  border-color: #d73d32;
}

input[type=checkbox].checkbox-slider.colored-danger:checked ~ .text:before {
  background-color: #d73d32;
  border-color: #d73d32;
}

input[type=checkbox].checkbox-slider.colored-danger:checked ~ .text:after {
  background-color: #d73d32;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-danger.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #d73d32;
}

input[type=checkbox].checkbox-slider.colored-danger.slider-icon ~ .text:after {
  border-color: #fff;
  color: #d73d32;
}

input[type=checkbox].checkbox-slider.colored-danger.toggle:checked ~ .text:after {
  color: #d73d32;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-danger.toggle ~ .text:after {
  background-color: #d73d32;
}

input[type=checkbox].checkbox-slider.colored-success ~ .text:after {
  border-color: #53a93f;
}

input[type=checkbox].checkbox-slider.colored-success:checked ~ .text:before {
  background-color: #53a93f;
  border-color: #53a93f;
}

input[type=checkbox].checkbox-slider.colored-success:checked ~ .text:after {
  background-color: #53a93f;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-success.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #53a93f;
}

input[type=checkbox].checkbox-slider.colored-success.slider-icon ~ .text:after {
  border-color: #fff;
  color: #53a93f;
}

input[type=checkbox].checkbox-slider.colored-success.toggle:checked ~ .text:after {
  color: #53a93f;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-success.toggle ~ .text:after {
  background-color: #53a93f;
}

input[type=checkbox].checkbox-slider.colored-warning ~ .text:after {
  border-color: #f4b400;
}

input[type=checkbox].checkbox-slider.colored-warning:checked ~ .text:before {
  background-color: #f4b400;
  border-color: #f4b400;
}

input[type=checkbox].checkbox-slider.colored-warning:checked ~ .text:after {
  background-color: #f4b400;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-warning.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #f4b400;
}

input[type=checkbox].checkbox-slider.colored-warning.slider-icon ~ .text:after {
  border-color: #fff;
  color: #f4b400;
}

input[type=checkbox].checkbox-slider.colored-warning.toggle:checked ~ .text:after {
  color: #f4b400;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-warning.toggle ~ .text:after {
  background-color: #f4b400;
}

input[type=checkbox].checkbox-slider.colored-silver ~ .text:after {
  border-color: #f4b400;
}

input[type=checkbox].checkbox-slider.colored-silver:checked ~ .text:before {
  background-color: #f4b400;
  border-color: #f4b400;
}

input[type=checkbox].checkbox-slider.colored-silver:checked ~ .text:after {
  background-color: #f4b400;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-silver.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #f4b400;
}

input[type=checkbox].checkbox-slider.colored-silver.slider-icon ~ .text:after {
  border-color: #fff;
  color: #f4b400;
}

input[type=checkbox].checkbox-slider.colored-silver.toggle:checked ~ .text:after {
  color: #f4b400;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-silver.toggle ~ .text:after {
  background-color: #f4b400;
}

input[type=checkbox].checkbox-slider.colored-blueberry ~ .text:after {
  border-color: #6f85bf;
}

input[type=checkbox].checkbox-slider.colored-blueberry:checked ~ .text:before {
  background-color: #6f85bf;
  border-color: #6f85bf;
}

input[type=checkbox].checkbox-slider.colored-blueberry:checked ~ .text:after {
  background-color: #6f85bf;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-blueberry.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #6f85bf;
}

input[type=checkbox].checkbox-slider.colored-blueberry.slider-icon ~ .text:after {
  border-color: #fff;
  color: #6f85bf;
}

input[type=checkbox].checkbox-slider.colored-blueberry.toggle:checked ~ .text:after {
  color: #6f85bf;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-blueberry.toggle ~ .text:after {
  background-color: #6f85bf;
}

input[type=checkbox].checkbox-slider.colored-palegreen ~ .text:after {
  border-color: #a0d468;
}

input[type=checkbox].checkbox-slider.colored-palegreen:checked ~ .text:before {
  background-color: #a0d468;
  border-color: #a0d468;
}

input[type=checkbox].checkbox-slider.colored-palegreen:checked ~ .text:after {
  background-color: #a0d468;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-palegreen.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #a0d468;
}

input[type=checkbox].checkbox-slider.colored-palegreen.slider-icon ~ .text:after {
  border-color: #fff;
  color: #a0d468;
}

input[type=checkbox].checkbox-slider.colored-palegreen.toggle:checked ~ .text:after {
  color: #a0d468;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-palegreen.toggle ~ .text:after {
  background-color: #a0d468;
}

input[type=checkbox].checkbox-slider.colored-orange ~ .text:after {
  border-color: #fb6e52;
}

input[type=checkbox].checkbox-slider.colored-orange:checked ~ .text:before {
  background-color: #fb6e52;
  border-color: #fb6e52;
}

input[type=checkbox].checkbox-slider.colored-orange:checked ~ .text:after {
  background-color: #fb6e52;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-orange.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #fb6e52;
}

input[type=checkbox].checkbox-slider.colored-orange.slider-icon ~ .text:after {
  border-color: #fff;
  color: #fb6e52;
}

input[type=checkbox].checkbox-slider.colored-orange.toggle:checked ~ .text:after {
  color: #fb6e52;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-orange.toggle ~ .text:after {
  background-color: #fb6e52;
}

input[type=checkbox].checkbox-slider.colored-darkorange ~ .text:after {
  border-color: #ed4e2a;
}

input[type=checkbox].checkbox-slider.colored-darkorange:checked ~ .text:before {
  background-color: #ed4e2a;
  border-color: #ed4e2a;
}

input[type=checkbox].checkbox-slider.colored-darkorange:checked ~ .text:after {
  background-color: #ed4e2a;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-darkorange.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #ed4e2a;
}

input[type=checkbox].checkbox-slider.colored-darkorange.slider-icon ~ .text:after {
  border-color: #fff;
  color: #ed4e2a;
}

input[type=checkbox].checkbox-slider.colored-darkorange.toggle:checked ~ .text:after {
  color: #ed4e2a;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-darkorange.toggle ~ .text:after {
  background-color: #ed4e2a;
}

input[type=checkbox].checkbox-slider.colored-magenta ~ .text:after {
  border-color: #bc5679;
}

input[type=checkbox].checkbox-slider.colored-magenta:checked ~ .text:before {
  background-color: #bc5679;
  border-color: #bc5679;
}

input[type=checkbox].checkbox-slider.colored-magenta:checked ~ .text:after {
  background-color: #bc5679;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-magenta.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #bc5679;
}

input[type=checkbox].checkbox-slider.colored-magenta.slider-icon ~ .text:after {
  border-color: #fff;
  color: #bc5679;
}

input[type=checkbox].checkbox-slider.colored-magenta.toggle:checked ~ .text:after {
  color: #bc5679;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-magenta.toggle ~ .text:after {
  background-color: #bc5679;
}

input[type=checkbox].checkbox-slider.colored-purple ~ .text:after {
  border-color: #7e3794;
}

input[type=checkbox].checkbox-slider.colored-purple:checked ~ .text:before {
  background-color: #7e3794;
  border-color: #7e3794;
}

input[type=checkbox].checkbox-slider.colored-purple:checked ~ .text:after {
  background-color: #7e3794;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-purple.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #7e3794;
}

input[type=checkbox].checkbox-slider.colored-purple.slider-icon ~ .text:after {
  border-color: #fff;
  color: #7e3794;
}

input[type=checkbox].checkbox-slider.colored-purple.toggle:checked ~ .text:after {
  color: #7e3794;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-purple.toggle ~ .text:after {
  background-color: #7e3794;
}

input[type=checkbox].checkbox-slider.colored-maroon ~ .text:after {
  border-color: #981b48;
}

input[type=checkbox].checkbox-slider.colored-maroon:checked ~ .text:before {
  background-color: #981b48;
  border-color: #981b48;
}

input[type=checkbox].checkbox-slider.colored-maroon:checked ~ .text:after {
  background-color: #981b48;
  border-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-maroon.slider-icon:checked ~ .text:after {
  background-color: #fff;
  color: #981b48;
}

input[type=checkbox].checkbox-slider.colored-maroon.slider-icon ~ .text:after {
  border-color: #fff;
  color: #981b48;
}

input[type=checkbox].checkbox-slider.colored-maroon.toggle:checked ~ .text:after {
  color: #981b48;
  background-color: #fff;
}

input[type=checkbox].checkbox-slider.colored-maroon.toggle ~ .text:after {
  background-color: #981b48;
}

/*#region Form Sliders*/
/*#region noUiSlider*/
.noUi-target,
.noUi-target {
  -webkit-touch-callout: none;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.noUi-base {
  width: 100%;
  height: 100%;
  position: relative;
}

.noUi-origin {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
}

.noUi-stacking .noUi-handle {
  /* This class is applied to the lower origin when
   its values is > 50%. */
  z-index: 10;
}

.noUi-stacking + .noUi-origin {
  /* Fix stacking order in IE7, which incorrectly
   creates a new context for the origins. */
  *z-index: -1;
}

.noUi-state-tap .noUi-origin {
  -webkit-transition: right 0.3s, top 0.3s;
  -moz-transition: right 0.3s, top 0.3s;
  -o-transition: right 0.3s, top 0.3s;
  transition: right 0.3s, top 0.3s;
}

.noUi-state-drag {
  cursor: inherit !important;
}

/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 18px;
}

.noUi-horizontal.slider-xs {
  height: 14px;
}

.noUi-horizontal.slider-xs .noUi-handle {
  height: 24px;
  width: 26px;
}

.noUi-horizontal.slider-xs .noUi-handle:before {
  right: 10px;
  top: 4px;
}

.noUi-horizontal.slider-xs .noUi-handle:after {
  right: 13px;
  top: 4px;
}

.noUi-horizontal.slider-sm {
  height: 16px;
}

.noUi-horizontal.slider-sm .noUi-handle {
  height: 26px;
  width: 30px;
}

.noUi-horizontal.slider-sm .noUi-handle:before {
  right: 12px;
  top: 5px;
}

.noUi-horizontal.slider-sm .noUi-handle:after {
  right: 15px;
  top: 5px;
}

.noUi-horizontal.slider-lg {
  height: 20px;
}

.noUi-horizontal.slider-lg .noUi-handle {
  height: 30px;
  width: 36px;
}

.noUi-horizontal.slider-lg .noUi-handle:before {
  right: 15px;
  top: 7px;
}

.noUi-horizontal.slider-lg .noUi-handle:after {
  right: 18px;
  top: 7px;
}

.noUi-horizontal.slider-xl {
  height: 22px;
}

.noUi-horizontal.slider-xl .noUi-handle {
  height: 32px;
  width: 38px;
}

.noUi-horizontal.slider-xl .noUi-handle:before {
  right: 16px;
  top: 8px;
}

.noUi-horizontal.slider-xl .noUi-handle:after {
  right: 19px;
  top: 8px;
}

.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  right: -17px;
  top: -6px;
}

.noUi-horizontal.noUi-extended {
  padding: 0 15px;
}

.noUi-horizontal.noUi-extended .noUi-origin {
  right: -15px;
}

.noUi-vertical {
  width: 18px;
}

.noUi-vertical.slider-xs {
  width: 14px;
}

.noUi-vertical.slider-xs .noUi-handle {
  width: 24px;
  height: 26px;
}

.noUi-vertical.slider-xs .noUi-handle:before {
  top: 10px;
  right: 4px;
}

.noUi-vertical.slider-xs .noUi-handle:after {
  top: 13px;
  right: 4px;
}

.noUi-vertical.slider-sm {
  width: 16px;
}

.noUi-vertical.slider-sm .noUi-handle {
  width: 26px;
  height: 30px;
}

.noUi-vertical.slider-sm .noUi-handle:before {
  top: 12px;
  right: 5px;
}

.noUi-vertical.slider-sm .noUi-handle:after {
  top: 15px;
  right: 5px;
}

.noUi-vertical.slider-lg {
  width: 20px;
}

.noUi-vertical.slider-lg .noUi-handle {
  width: 30px;
  height: 36px;
}

.noUi-vertical.slider-lg .noUi-handle:before {
  top: 15px;
  right: 7px;
}

.noUi-vertical.slider-lg .noUi-handle:after {
  top: 18px;
  right: 7px;
}

.noUi-vertical.slider-xl {
  width: 22px;
}

.noUi-vertical.slider-xl .noUi-handle {
  width: 32px;
  height: 38px;
}

.noUi-vertical.slider-xl .noUi-handle:before {
  top: 16px;
  right: 8px;
}

.noUi-vertical.slider-xl .noUi-handle:after {
  top: 19px;
  right: 8px;
}

.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  right: -6px;
  top: -17px;
}

.noUi-vertical.noUi-extended {
  padding: 15px 0;
}

.noUi-vertical.noUi-extended .noUi-origin {
  bottom: -15px;
}

/* Styling;
 */
.noUi-background {
  background: #fafafa;
}

.noUi-connect {
  background: var(--main-color);
  -webkit-transition: background 450ms;
  -moz-transition: background 450ms;
  -o-transition: background 450ms;
  transition: background 450ms;
}

.noUi-target {
  border-radius: 4px;
  border: 1px solid #d3d3d3;
}

/* Handles and cursors;
 */
.noUi-dragable {
  cursor: w-resize;
}

.noUi-vertical .noUi-dragable {
  cursor: n-resize;
}

.noUi-handle {
  position: relative;
  z-index: 1;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: #fff;
  cursor: default;
  -webkit-box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb;
  -moz-box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb;
  box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb;
}

.noUi-active {
  -webkit-box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb;
  -moz-box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb;
  box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb;
}

/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #e8e7e6;
  right: 14px;
  top: 6px;
}

.noUi-handle:after {
  right: 17px;
}

.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  right: 6px;
  top: 14px;
}

.noUi-vertical .noUi-handle:after {
  top: 17px;
}

/* Disabled state;
 */
[disabled].noUi-connect,
[disabled] .noUi-connect {
  background: #b8b8b8;
}

[disabled] .noUi-handle {
  cursor: not-allowed;
}

/* Blocked state;
 */
.noUi-state-blocked.noUi-connect,
.noUi-state-blocked .noUi-connect {
  background: #4fdacf;
}

/*#endregion noUiSlider*/
/*#region jQRangeSlider*/
.ui-rangeSlider {
  height: 30px;
  padding-top: 40px;
}

.ui-rangeSlider.slider-sm .ui-rangeSlider-container,
.ui-rangeSlider.slider-sm .ui-rangeSlider-arrow {
  height: 20px;
}

.ui-rangeSlider.slider-sm .ui-rangeSlider-bar {
  height: 18px;
}

.ui-rangeSlider.slider-xs .ui-rangeSlider-container,
.ui-rangeSlider.slider-xs .ui-rangeSlider-arrow {
  height: 10px;
}

.ui-rangeSlider.slider-xs .ui-rangeSlider-bar {
  height: 8px;
}

.ui-rangeSlider.slider-xs .ui-rangeSlider-arrow-inner:before {
  font-size: 10px;
  line-height: 22px;
}

.ui-rangeSlider.valuelabel-blue .ui-rangeSlider-label {
  background-color: #5db2ff;
}

.ui-rangeSlider.valuelabel-blue .ui-rangeSlider-label-inner {
  border-top: 6px solid #5db2ff;
}

.ui-rangeSlider.valuelabel-primary .ui-rangeSlider-label {
  background-color: #4374e0;
}

.ui-rangeSlider.valuelabel-primary .ui-rangeSlider-label-inner {
  border-top: 6px solid #4374e0;
}

.ui-rangeSlider.valuelabel-danger .ui-rangeSlider-label {
  background-color: #d73d32;
}

.ui-rangeSlider.valuelabel-danger .ui-rangeSlider-label-inner {
  border-top: 6px solid #d73d32;
}

.ui-rangeSlider.valuelabel-success .ui-rangeSlider-label {
  background-color: #53a93f;
}

.ui-rangeSlider.valuelabel-success .ui-rangeSlider-label-inner {
  border-top: 6px solid #53a93f;
}

.ui-rangeSlider.valuelabel-warning .ui-rangeSlider-label {
  background-color: #f4b400;
}

.ui-rangeSlider.valuelabel-warning .ui-rangeSlider-label-inner {
  border-top: 6px solid #f4b400;
}

.ui-rangeSlider.valuelabel-silver .ui-rangeSlider-label {
  background-color: #777;
}

.ui-rangeSlider.valuelabel-silver .ui-rangeSlider-label-inner {
  border-top: 6px solid #777;
}

.ui-rangeSlider.valuelabel-blueberry .ui-rangeSlider-label {
  background-color: #6f85bf;
}

.ui-rangeSlider.valuelabel-blueberry .ui-rangeSlider-label-inner {
  border-top: 6px solid #6f85bf;
}

.ui-rangeSlider.valuelabel-palegreen .ui-rangeSlider-label {
  background-color: #a0d468;
}

.ui-rangeSlider.valuelabel-palegreen .ui-rangeSlider-label-inner {
  border-top: 6px solid #a0d468;
}

.ui-rangeSlider.valuelabel-orange .ui-rangeSlider-label {
  background-color: #fb6e52;
}

.ui-rangeSlider.valuelabel-orange .ui-rangeSlider-label-inner {
  border-top: 6px solid #fb6e52;
}

.ui-rangeSlider.valuelabel-darkorange .ui-rangeSlider-label {
  background-color: #ed4e2a;
}

.ui-rangeSlider.valuelabel-darkorange .ui-rangeSlider-label-inner {
  border-top: 6px solid #ed4e2a;
}

.ui-rangeSlider.valuelabel-magenta .ui-rangeSlider-label {
  background-color: #bc5679;
}

.ui-rangeSlider.valuelabel-magenta .ui-rangeSlider-label-inner {
  border-top: 6px solid #bc5679;
}

.ui-rangeSlider.valuelabel-purple .ui-rangeSlider-label {
  background-color: #7e3794;
}

.ui-rangeSlider.valuelabel-purple .ui-rangeSlider-label-inner {
  border-top: 6px solid #7e3794;
}

.ui-rangeSlider.valuelabel-maroon .ui-rangeSlider-label {
  background-color: #981b48;
}

.ui-rangeSlider.valuelabel-maroon .ui-rangeSlider-label-inner {
  border-top: 6px solid #981b48;
}

.ui-rangeSlider.valuelabel-yellow .ui-rangeSlider-label {
  background-color: #ffce55;
}

.ui-rangeSlider.valuelabel-yellow .ui-rangeSlider-label-inner {
  border-top: 6px solid #ffce55;
}

.ui-rangeSlider.valuelabel-success .ui-rangeSlider-label {
  background-color: #53a93f;
}

.ui-rangeSlider.valuelabel-success .ui-rangeSlider-label-inner {
  border-top: 6px solid #53a93f;
}

.ui-rangeSlider.silder-blue .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-blue .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #5db2ff !important;
}

.ui-rangeSlider.silder-blue .ui-rangeSlider-bar {
  background: #5db2ff !important;
}

.ui-rangeSlider.silder-primary .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-primary .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #4374e0 !important;
}

.ui-rangeSlider.silder-primary .ui-rangeSlider-bar {
  background: #4374e0 !important;
}

.ui-rangeSlider.silder-danger .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-danger .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #d73d32 !important;
}

.ui-rangeSlider.silder-danger .ui-rangeSlider-bar {
  background: #d73d32 !important;
}

.ui-rangeSlider.silder-warning .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-warning .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #f4b400 !important;
}

.ui-rangeSlider.silder-warning .ui-rangeSlider-bar {
  background: #f4b400 !important;
}

.ui-rangeSlider.silder-silver .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-silver .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #777 !important;
}

.ui-rangeSlider.silder-silver .ui-rangeSlider-bar {
  background: #777 !important;
}

.ui-rangeSlider.silder-blueberry .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-blueberry .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #6f85bf !important;
}

.ui-rangeSlider.silder-blueberry .ui-rangeSlider-bar {
  background: #6f85bf !important;
}

.ui-rangeSlider.silder-palegreen .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-palegreen .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #a0d468 !important;
}

.ui-rangeSlider.silder-palegreen .ui-rangeSlider-bar {
  background: #a0d468 !important;
}

.ui-rangeSlider.silder-success .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-success .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #53a93f !important;
}

.ui-rangeSlider.silder-success .ui-rangeSlider-bar {
  background: #53a93f !important;
}

.ui-rangeSlider.silder-yellow .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-yellow .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #ffce55 !important;
}

.ui-rangeSlider.silder-yellow .ui-rangeSlider-bar {
  background: #ffce55 !important;
}

.ui-rangeSlider.silder-orange .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-orange .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #fb6e52 !important;
}

.ui-rangeSlider.silder-orange .ui-rangeSlider-bar {
  background: #fb6e52 !important;
}

.ui-rangeSlider.silder-darkorange .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-darkorange .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #ed4e2a !important;
}

.ui-rangeSlider.silder-darkorange .ui-rangeSlider-bar {
  background: #ed4e2a !important;
}

.ui-rangeSlider.silder-magenta .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-magenta .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #bc5679 !important;
}

.ui-rangeSlider.silder-magenta .ui-rangeSlider-bar {
  background: #bc5679 !important;
}

.ui-rangeSlider.silder-purple .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-purple .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #7e3794 !important;
}

.ui-rangeSlider.silder-purple .ui-rangeSlider-bar {
  background: #7e3794 !important;
}

.ui-rangeSlider.silder-maroon .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider.silder-maroon .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #981b48 !important;
}

.ui-rangeSlider.silder-maroon .ui-rangeSlider-bar {
  background: #981b48 !important;
}

.ui-rangeSlider,
.ui-rangeSlider-container,
.ui-rangeSlider-arrow {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.ui-rangeSlider-withArrows .ui-rangeSlider-container {
  margin: 0 15px;
}

.ui-rangeSlider-noArrow .ui-rangeSlider-container {
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
  border-right: solid 1px #d3d3d3;
  border-left: solid 1px #d3d3d3;
}

.ui-rangeSlider-disabled.ui-rangeSlider-noArrow .ui-rangeSlider-container {
  border-color: #8490a3;
}

.ui-rangeSlider-container,
.ui-rangeSlider-arrow {
  height: 30px;
  border-top: solid 1px #d3d3d3;
  border-bottom: solid 1px #d3d3d3;
  background: #fff;
}

.ui-rangeSlider-label {
  background-color: #fb6e52;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  padding: 5px 10px;
  bottom: 36px;
  color: #fff;
  font-size: 13px;
  cursor: col-resize;
}

.ui-rangeSlider-disabled .ui-rangeSlider-container,
.ui-rangeSlider-disabled .ui-rangeSlider-arrow,
.ui-rangeSlider-disabled .ui-rangeSlider-label {
  zoom: 1;
  filter: alpha(opacity=40);
  -webkit-opacity: 0.4;
  -moz-opacity: 0.4;
  opacity: 0.4;
}

.ui-rangeSlider-arrow {
  width: 14px;
  cursor: pointer;
}

.ui-rangeSlider-leftArrow {
  -webkit-border-radius: 2px 0 0 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px 0 0 2px;
  -moz-background-clip: padding;
  border-radius: 2px 0 0 2px;
  background-clip: padding-box;
  border-right: solid 1px #d3d3d3;
}

.ui-rangeSlider-rightArrow {
  -webkit-border-radius: 0 2px 2px 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0 2px 2px 0;
  -moz-background-clip: padding;
  border-radius: 0 2px 2px 0;
  background-clip: padding-box;
  border-left: solid 1px #d3d3d3;
}

.ui-rangeSlider-arrow-inner {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -10px;
}

.ui-rangeSlider-arrow-inner:before {
  position: absolute;
  top: 0;
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 14px;
  line-height: 23px;
  border-width: 1px;
  content: "";
  color: #d3d3d3;
}

.ui-rangeSlider-leftArrow .ui-rangeSlider-arrow-inner:before {
  content: "\f053";
  right: 8px;
  margin-right: -5px;
}

.ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
.ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
  color: #a0d468;
}

.ui-rangeSlider-rightArrow .ui-rangeSlider-arrow-inner:before {
  content: "\f054";
  left: 0;
  margin-left: -11px;
}

.ui-rangeSlider-innerBar {
  width: 110%;
  height: 100%;
  right: -10px;
  overflow: hidden;
}

.ui-rangeSlider-bar {
  background: var(--main-color);
  height: 28px;
  margin: 1px;
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
}

.ui-rangeSlider-disabled .ui-rangeSlider-bar {
  zoom: 1;
  filter: alpha(opacity=40);
  -webkit-opacity: 0.4;
  -moz-opacity: 0.4;
  opacity: 0.4;
}

.ui-rangeSlider-handle {
  width: 10px;
  height: 30px;
  background: transparent;
  cursor: col-resize;
}

.ui-rangeSlider-label-inner {
  position: absolute;
  top: 100%;
  right: 50%;
  display: block;
  z-index: 99;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  margin-right: -6px;
  border-top: 6px solid #fb6e52;
}

.ui-rangeSlider-disabled .ui-rangeSlider-label-inner {
  zoom: 1;
  filter: alpha(opacity=40);
  -webkit-opacity: 0.4;
  -moz-opacity: 0.4;
  opacity: 0.4;
}

.ui-editRangeSlider-inputValue {
  width: 2em;
  text-align: center;
  font-size: 13px;
  border: 1px solid transparent !important;
  margin-right: -5px;
  margin-left: -5px;
}

.ui-rangeSlider .ui-ruler-scale {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.ui-rangeSlider .ui-ruler-tick {
  float: right;
}

.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-inner {
  color: #d3d3d3;
  margin-top: 1px;
  border-right: 1px solid #d3d3d3;
  height: 30px;
  padding-right: 2px;
  position: relative;
}

.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-label {
  position: absolute;
  bottom: 6px;
}

.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-label {
  color: #fbfbfb;
}

.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-inner {
  border-right: 1px solid #d3d3d3;
  margin-top: 25px;
  height: 5px;
}

/*#region Spinners*/
.spinbox {
  position: relative;
}

.spinbox input {
  float: right;
  padding-right: 35px;
}

.spinbox .btn {
  position: relative;
  width: 20px;
  padding-top: 0;
  padding-left: 9px;
  padding-right: 9px;
  font-size: 14px;
  font-weight: normal;
  padding: 4px 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  height: 17px;
  zoom: 1;
  filter: alpha(opacity=70);
  -webkit-opacity: 0.7;
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.spinbox .btn:hover {
  color: #f5f5f5;
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.spinbox .btn:focus,
.spinbox .btn:active {
  color: #f5f5f5;
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.spinbox .btn.disabled {
  cursor: not-allowed;
}

.spinbox .spinbox-buttons {
  position: absolute;
  right: 0;
  float: right;
  width: 20px;
  height: 34px;
  border-right: 1px solid #d5d5d5;
}

.spinbox .spinbox-up {
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  top: 0;
  background-color: #fbfbfb;
  border-right: 1px !important;
}

.spinbox .spinbox-up i {
  position: relative;
  top: -6px;
  margin-left: 0;
}

.spinbox .spinbox-down {
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  bottom: 0;
  background-color: #fbfbfb;
  border-bottom-right-radius: 0 !important;
  border-right: 1px !important;
  border-top: 1px solid #d5d5d5;
}

.spinbox .spinbox-down i {
  position: relative;
  top: -7px;
  margin-left: 0;
}

.spinbox.spinbox-right .spinbox-buttons {
  right: auto;
  left: 0;
  border-left: 0;
}

.spinbox.spinbox-right input {
  padding-right: 10px;
  padding-left: 35px;
  margin-right: 0;
}

.spinbox.spinbox-horizontal input {
  padding-right: 60px;
}

.spinbox.spinbox-horizontal .spinbox-buttons {
  margin: 0;
  font-size: 0;
  width: 50px;
  right: 0;
  top: 0;
}

.spinbox.spinbox-horizontal .spinbox-buttons > .btn {
  height: 34px;
  line-height: 32px;
  font-size: 18px;
  display: inline-block;
  vertical-align: sub;
  margin: 0;
}

.spinbox.spinbox-horizontal .spinbox-buttons > .btn > i {
  vertical-align: middle;
  display: inline-block;
}

.spinbox.spinbox-horizontal .spinbox-down {
  width: 24px;
  border-right: 0;
}

.spinbox.spinbox-horizontal .spinbox-down i {
  top: -5px;
}

.spinbox.spinbox-horizontal .spinbox-up {
  width: 24px;
}

.spinbox.spinbox-horizontal .spinbox-up i {
  top: -5px;
}

.spinbox.spinbox-horizontal.spinbox-right {
  margin-right: 0;
}

.spinbox.spinbox-horizontal.spinbox-right .spinbox-buttons {
  left: -1px;
  right: auto;
}

.spinbox.spinbox-horizontal.spinbox-right input {
  padding-right: 10px;
}

.spinbox.spinbox-horizontal.spinbox-two-sided .spinbox-buttons {
  width: 25px !important;
}

.spinbox.spinbox-horizontal.spinbox-two-sided .spinbox-buttons.spinbox-buttons-left {
  right: 0;
}

.spinbox.spinbox-horizontal.spinbox-two-sided .spinbox-buttons.spinbox-buttons-right {
  left: 0;
  right: auto;
}

.spinbox.spinbox-horizontal.spinbox-two-sided input {
  padding-left: 35px !important;
}

/*#region Select2*/
.select2-container {
  margin: 0;
  position: relative;
  display: inline-block;
  -ms-zoom: 1;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
}

.select2-container .select2-choice {
  display: block;
  height: 32px;
  padding: 0 0 0 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ccc;
  white-space: nowrap;
  line-height: 32px;
  color: #444;
  text-decoration: none;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff;
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.select2-container.select2-drop-above .select2-choice {
  border-bottom-color: #ccc;
}

.select2-container.select2-allowclear .select2-choice .select2-chosen {
  margin-left: 42px;
}

.select2-container .select2-choice > .select2-chosen {
  margin-left: 26px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.select2-container .select2-choice abbr {
  display: none;
  width: 12px;
  height: 12px;
  position: absolute;
  left: 24px;
  top: 8px;
  font-size: 1px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  outline: 0;
}

.select2-container.select2-allowclear .select2-choice abbr {
  display: inline-block;
}

.select2-container .select2-choice abbr:hover {
  cursor: pointer;
}

.select2-drop-mask {
  border: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 9998;
  background: #fff;
  filter: alpha(opacity=0);
}

.select2-drop {
  margin-top: -1px;
  width: 100%;
  position: absolute;
  z-index: 9999;
  top: 100%;
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
  border-top: 0;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.select2-drop-auto-width {
  border-top: 1px solid #ccc;
  width: auto;
}

.select2-drop-auto-width .select2-search {
  padding-top: 4px;
}

.select2-drop.select2-drop-above {
  margin-bottom: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  border-top-width: 3px;
  border-bottom: 0;
  box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
}

.select2-drop-active {
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-top: 0;
}

.select2-drop.select2-drop-above.select2-drop-active {
  border-top-width: 3px;
}

.select2-container .select2-choice .select2-arrow {
  display: inline-block;
  width: 34px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  background: #fff;
}

.select2-container .select2-choice .select2-arrow b {
  width: 100%;
  height: 100%;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  font-size: 14px;
}

.select2-container .select2-choice .select2-arrow b:before {
  content: "\f107";
  width: 100%;
  height: 100%;
  text-align: center;
  display: block;
}

.select2-search {
  display: inline-block;
  width: 100%;
  min-height: 26px;
  margin: 0;
  padding-right: 4px;
  padding-left: 4px;
  position: relative;
  z-index: 10000;
  white-space: nowrap;
}

.select2-search input {
  width: 100%;
  height: auto !important;
  min-height: 29px;
  padding: 6px 20px 5px 10px;
  margin: 0;
  outline: 0;
  font-family: sans-serif;
  font-size: 1em;
  border: 1px solid #aaa;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #fff;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iODUlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #fff 85%, #eee 99%);
  background-image: -moz-linear-gradient(top, #fff 85%, #eee 99%);
  background-image: -o-linear-gradient(top, #fff 85%, #eee 99%);
  background-image: linear-gradient(to bottom, #fff 85%, #eee 99%);
}

.select2-search:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  content: "\f002";
  top: 25%;
  left: 10px;
  color: #737373 !important;
}

.select2-drop.select2-drop-above .select2-search input {
  margin-top: 4px;
}

.select2-drop.select2-drop-above .select2-search:before {
  top: 34%;
}

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
  border: 1px solid rgba(0, 0, 0, 0.25);
  outline: 0;
}

.select2-dropdown-open .select2-choice {
  border-bottom-color: transparent;
  -webkit-box-shadow: 0 1px 0 #fff inset;
  box-shadow: 0 1px 0 #fff inset;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #fff;
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-top-color: transparent;
}

.select2-dropdown-open .select2-choice .select2-arrow {
  background: 0 0;
  border-right: 0;
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

.select2-dropdown-open .select2-choice .select2-arrow b {
  background-position: -18px 1px;
}

.select2-results {
  max-height: 200px;
  padding: 0 0 0 4px;
  margin: 4px 4px 4px 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.select2-results ul.select2-result-sub {
  margin: 0;
  padding-right: 0;
}

.select2-results ul.select2-result-sub > li .select2-result-label {
  padding-right: 20px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-right: 40px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-right: 60px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-right: 80px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-right: 100px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-right: 110px;
}

.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
  padding-right: 120px;
}

.select2-results li {
  list-style: none;
  display: list-item;
  background-image: none;
}

.select2-results li.select2-result-with-children > .select2-result-label {
  font-weight: 700;
}

.select2-results .select2-result-label {
  padding: 3px 7px 4px;
  margin: 0;
  cursor: pointer;
  min-height: 1em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.select2-results .select2-highlighted {
  background: var(--main-color);
  color: #fff;
}

.select2-results li em {
  background: #feffde;
  font-style: normal;
}

.select2-results .select2-highlighted em {
  background: 0 0;
}

.select2-results .select2-highlighted ul {
  background: #fff;
  color: #000;
}

.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
  background: #f4f4f4;
  display: list-item;
  padding: 3px 5px;
}

.select2-no-results {
  padding-right: 20px;
}

.select2-no-results:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f05a";
  margin-left: 5px;
}

.select2-results .select2-disabled.select2-highlighted {
  color: #666;
  background: #f4f4f4;
  display: list-item;
  cursor: default;
}

.select2-results .select2-disabled {
  background: #f4f4f4;
  display: list-item;
  cursor: default;
}

.select2-results .select2-selected {
  display: none;
}

.select2-more-results {
  background: #f4f4f4;
  display: list-item;
}

.select2-container.select2-container-disabled .select2-choice {
  background-color: #f4f4f4;
  background-image: none;
  border: 1px solid #ddd;
  cursor: default;
}

.select2-container.select2-container-disabled .select2-choice .select2-arrow {
  background-color: #f4f4f4;
  background-image: none;
  border-right: 0;
}

.select2-container.select2-container-disabled .select2-choice abbr {
  display: none;
}

.select2-container-multi .select2-choices {
  height: auto !important;
  height: 1%;
  margin: 0;
  padding: 0;
  position: relative;
  border: 1px solid #ccc;
  cursor: text;
  overflow: hidden;
  background-color: #fff;
  min-height: 26px;
}

.select2-locked {
  padding: 3px 5px !important;
}

.select2-container-multi.select2-container-active .select2-choices {
  border: 1px solid rgba(0, 0, 0, 0.25);
  outline: 0;
}

.select2-container-multi .select2-choices li {
  float: right;
  list-style: none;
}

.select2-container-multi .select2-choices .select2-search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.select2-container-multi .select2-choices .select2-search-field input {
  padding: 5px;
  margin: 1px 0;
  font-family: sans-serif;
  font-size: 100%;
  color: #666;
  outline: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: transparent !important;
}

.select2-default {
  color: #999 !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
  padding: 1px 28px 1px 8px;
  margin: 4px 0 3px 5px;
  position: relative;
  line-height: 18px;
  color: #fff;
  cursor: default;
  border: 1px solid var(--main-color);
  -moz-background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: var(--main-color);
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
  cursor: default;
}

.select2-container-multi .select2-choices .select2-search-choice-focus {
  opacity: 0.8;
}

.select2-search-choice-close {
  display: block;
  min-width: 21px;
  min-height: 20px;
  position: absolute;
  right: 3px;
  top: 3px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  text-decoration: none !important;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.select2-search-choice-close:before {
  color: #fff;
  content: "\f00d";
  font-size: 14px;
}

.select2-container-multi .select2-search-choice-close {
  display: block;
  top: 0;
  left: 0;
  padding: 2px 4px 3px 6px;
  zoom: 1;
  filter: alpha(opacity=70);
  -webkit-opacity: 0.7;
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.select2-container-multi .select2-search-choice-close:hover {
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.select2-container-multi.select2-container-disabled .select2-choices {
  background-color: #f4f4f4;
  background-image: none;
  border: 1px solid #ddd;
  cursor: default;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
  padding: 3px 5px;
  border: 1px solid #4a90cc;
  background-image: none;
  background-color: #86b4dd;
  cursor: not-allowed;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
  display: none;
  background: 0 0;
}

.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
  text-decoration: underline;
}

.select2-offscreen,
.select2-offscreen:focus {
  clip: rect(0 0 0 0) !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  outline: 0 !important;
  right: 0 !important;
  top: 0 !important;
}

.select2-display-none {
  display: none;
}

.select2-measure-scrollbar {
  position: absolute;
  top: -10000px;
  right: -10000px;
  width: 100px;
  height: 100px;
  overflow: scroll;
}

/*#region TagsInput*/
.bootstrap-tagsinput {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 1px 3px;
  font-size: 13px;
  line-height: 1.428571429;
  color: #262626;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
}

.bootstrap-tagsinput > span {
  font-weight: 400;
  padding: 4px 28px 4px 8px;
  font-size: 13px;
  border: 1px solid var(--main-color);
  background: var(--main-color);
}

.bootstrap-tagsinput input {
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  outline: 0;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: auto !important;
  max-width: inherit;
}

.bootstrap-tagsinput input:focus {
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.bootstrap-tagsinput .tag {
  color: #fff;
  position: relative;
  margin: 3px 0 3px 2px;
  display: inline-block;
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
}

.bootstrap-tagsinput .tag [data-role=remove] {
  display: block;
  top: -1px;
  left: 0;
  padding: 3px 4px 3px 5px;
  width: 23px;
  height: 22px;
  position: absolute;
  cursor: pointer;
}

.bootstrap-tagsinput .tag [data-role=remove]:hover:after {
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.bootstrap-tagsinput .tag [data-role=remove]:hover:active:after {
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.bootstrap-tagsinput .tag [data-role=remove]:after {
  content: "\f00d";
  font-family: fontAwesome;
  padding: 2px 1px;
  line-height: 16px;
  font-size: 14px;
  text-align: center;
  zoom: 1;
  filter: alpha(opacity=70);
  -webkit-opacity: 0.7;
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.bootstrap-tagsinput .tag [data-role=remove]:after:hover {
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.bootstrap-tagsinput .tag [data-role=remove]:after:hover:active {
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

/*#region ColorPicker*/
.minicolors {
  position: relative;
}

.minicolors-swatch {
  position: absolute;
  vertical-align: middle;
  border: solid 1px #fbfbfb;
  cursor: text;
  padding: 0;
  margin: 0;
  display: inline-block;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}

.minicolors-swatch-color {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.minicolors input[type=hidden] + .minicolors-swatch {
  width: 28px;
  position: static;
  cursor: pointer;
}

/* Panel */
.minicolors-panel {
  position: absolute;
  width: 173px;
  height: 152px;
  background: white;
  border: solid 1px #ccc;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  display: none;
}

.minicolors-panel.minicolors-visible {
  display: block;
}

/* Panel positioning */
.minicolors-position-top .minicolors-panel {
  top: -154px;
}

.minicolors-position-right .minicolors-panel {
  left: 0;
}

.minicolors-position-bottom .minicolors-panel {
  top: auto;
}

.minicolors-position-left .minicolors-panel {
  right: 0;
}

.minicolors-with-opacity .minicolors-panel {
  width: 194px;
}

.minicolors .minicolors-grid {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 150px;
  height: 150px;
  cursor: crosshair;
}

.minicolors .minicolors-grid-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: none;
}

.minicolors-slider-saturation .minicolors-grid {
  background-position: -420px 0;
}

.minicolors-slider-brightness .minicolors-grid {
  background-position: -570px 0;
}

.minicolors-slider-brightness .minicolors-grid-inner {
  background: #000;
}

.minicolors-slider-wheel .minicolors-grid {
  background-position: -720px 0;
}

.minicolors-slider,
.minicolors-opacity-slider {
  position: absolute;
  top: 1px;
  right: 152px;
  width: 20px;
  height: 150px;
  cursor: row-resize;
}

.minicolors-slider-saturation .minicolors-slider {
  background-position: -60px 0;
}

.minicolors-slider-brightness .minicolors-slider {
  background-position: -20px 0;
}

.minicolors-slider-wheel .minicolors-slider {
  background-position: -20px 0;
}

.minicolors-opacity-slider {
  right: 173px;
  background-position: -40px 0;
  display: none;
}

.minicolors-with-opacity .minicolors-opacity-slider {
  display: block;
}

/* Pickers */
.minicolors-grid .minicolors-picker {
  position: absolute;
  top: 70px;
  right: 70px;
  width: 12px;
  height: 12px;
  border: solid 1px #000;
  border-radius: 10px;
  margin-top: -6px;
  margin-right: -6px;
  background: none;
}

.minicolors-grid .minicolors-picker > div {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  border: solid 2px #fff;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.minicolors-picker {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 2px;
  background: #fff;
  border: solid 1px #000;
  margin-top: -2px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/* Inline controls */
.minicolors-inline {
  display: inline-block;
}

.minicolors-inline .minicolors-input {
  display: none !important;
}

.minicolors-inline .minicolors-panel {
  position: relative;
  top: auto;
  right: auto;
  box-shadow: none;
  z-index: auto;
  display: inline-block;
}

/* Bootstrap theme */
.minicolors-theme-bootstrap .minicolors-swatch {
  top: 3px;
  right: 3px;
  width: 28px;
  height: 28px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}

.minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
  right: auto;
  left: 3px;
}

.minicolors-theme-bootstrap .minicolors-input {
  padding-right: 44px;
}

.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
  padding-left: 44px;
  padding-right: 12px;
}

.dropdown-colorpicker {
  height: 35px;
  width: 35px;
  padding: 7px;
}

.dropdown-colorpicker > .dropdown-menu {
  top: 100%;
  right: 0;
  padding: 4px;
  min-width: 154px;
  max-width: 154px;
}

.dropdown-colorpicker > .dropdown-menu > li {
  display: block;
  float: right;
  width: 20px;
  height: 20px;
  margin: 2px;
}

.dropdown-colorpicker > .dropdown-menu > li > .colorpick-btn {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  position: relative;
  -webkit-transition: all ease 0.1s;
  -moz-transition: all ease 0.1s;
  -o-transition: all ease 0.1s;
  transition: all ease 0.1s;
}

.dropdown-colorpicker > .dropdown-menu > li > .colorpick-btn:hover {
  text-decoration: none;
  zoom: 1;
  filter: alpha(opacity=80);
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
  -webkit-transform: scale(1.08);
  -moz-transform: scale(1.08);
  -o-transform: scale(1.08);
  -ms-transform: scale(1.08);
  transform: scale(1.08);
}

.dropdown-colorpicker > .dropdown-menu > li > .colorpick-btn.selected:after {
  content: "\f00c";
  display: inline-block;
  font-family: FontAwesome;
  font-size: 11px;
  color: #fff;
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
  line-height: 20px;
}

.btn-colorpicker {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ddd;
  vertical-align: middle;
  border-radius: 0;
}

/*#region DatePicker*/
.datepicker {
  top: 0;
  right: 0;
  padding: 4px;
  margin-top: 1px;
  /*.dow {
    border-top: 1px solid #ddd !important;
  }*/
}

.datepicker:before {
  content: "";
  display: inline-block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -7px;
  right: 6px;
}

.datepicker:after {
  content: "";
  display: inline-block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  top: -6px;
  right: 7px;
}

.datepicker > div {
  display: none;
}

.datepicker table {
  width: 100%;
  margin: 0;
}

.datepicker td,
.datepicker th {
  text-align: center;
  font-size: 12px;
  height: 20px;
  width: 20px;
}

.datepicker td.day:hover {
  background: #eee;
  cursor: pointer;
}

.datepicker td.day.disabled {
  color: #eee;
}

.datepicker td.old,
.datepicker td.new {
  color: #999;
}

.datepicker td.active,
.datepicker td.active:hover {
  background-color: var(--main-color);
  color: #fff;
  -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker td span {
  display: block;
  width: 47px;
  height: 54px;
  line-height: 54px;
  float: right;
  margin: 2px;
  cursor: pointer;
}

.datepicker td span:hover {
  background: #eee;
}

.datepicker td span.active {
  background-color: var(--main-color);
  color: #fff;
  -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker td span.old {
  color: #999;
}

.datepicker th.switch {
  width: 175px;
}

.datepicker th.next,
.datepicker th.prev {
  font-size: 12px;
}

.datepicker thead tr:first-child th {
  cursor: pointer;
}

.datepicker thead tr:first-child th:hover {
  background: #eee;
}

.input-append.date .add-on i,
.input-prepend.date .add-on i {
  display: block;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

/*#region DateRangePicker*/
.daterangepicker.dropdown-menu {
  max-width: none;
  z-index: 3000;
}

.daterangepicker.opensleft .ranges,
.daterangepicker.opensleft .calendar {
  float: right;
  margin: 4px;
}

.daterangepicker.opensright .ranges,
.daterangepicker.opensright .calendar {
  float: left;
  margin: 4px;
}

.daterangepicker .ranges {
  width: 160px;
  text-align: right;
}

.daterangepicker .ranges .range_inputs > div {
  float: right;
}

.daterangepicker .ranges .range_inputs > div:nth-child(2) {
  padding-right: 11px;
}

.daterangepicker .calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .calendar.single .calendar-date {
  border: none;
}

.daterangepicker .calendar th,
.daterangepicker .calendar td {
  white-space: nowrap;
  text-align: center;
  min-width: 32px;
}

.daterangepicker .ranges label {
  color: #333;
  display: block;
  font-size: 11px;
  font-weight: normal;
  height: 20px;
  line-height: 20px;
  margin-bottom: 2px;
  text-transform: uppercase;
  width: 74px;
}

.daterangepicker .ranges input {
  font-size: 11px;
}

.daterangepicker .ranges .input-mini {
  background-color: #eee;
  border: 1px solid #ccc;
  color: #555;
  display: block;
  font-size: 11px;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  margin: 0 0 10px 0;
  padding: 0 6px;
  width: 74px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.daterangepicker .ranges li {
  font-size: 13px;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  color: var(--main-color);
  padding: 3px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}

.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
  background: var(--main-color);
  border: 1px solid var(--main-color);
  color: #fff;
}

.daterangepicker .calendar-date {
  border: 1px solid #ddd;
  padding: 4px;
  background: #fff;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 8px auto 0 auto;
  line-height: 30px;
}

.daterangepicker {
  position: absolute;
  background: #fff;
  top: 100px;
  right: 20px;
  padding: 4px;
  margin-top: 1px;
  font-size: 12px;
}

.daterangepicker.opensleft:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-right: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: "";
}

.daterangepicker.opensleft:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-right: 6px solid transparent;
  content: "";
}

.daterangepicker.opensright:before {
  position: absolute;
  top: -7px;
  right: 9px;
  display: inline-block;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-right: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: "";
}

.daterangepicker.opensright:after {
  position: absolute;
  top: -6px;
  right: 10px;
  display: inline-block;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-right: 6px solid transparent;
  content: "";
}

.daterangepicker table {
  width: 100%;
  margin: 0;
}

.daterangepicker td,
.daterangepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  white-space: nowrap;
}

.daterangepicker td.off {
  color: #999;
}

.daterangepicker td.disabled {
  color: #999;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background: #eee;
}

.daterangepicker td.in-range {
  background: #d0e7fc;
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

.daterangepicker td.week,
.daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-left: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.ampmselect {
  width: 50px;
  margin-bottom: 0;
  padding: 0;
}

.daterangepicker_start_input {
  float: right;
}

.daterangepicker_end_input {
  float: right;
  padding-right: 11px;
}

.daterangepicker th.month {
  width: auto;
}

/*#region TimePicker*/
.bootstrap-timepicker {
  position: relative;
}

.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu {
  right: auto;
  left: 0;
}

.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before {
  right: auto;
  left: 12px;
}

.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after {
  right: auto;
  left: 13px;
}

.bootstrap-timepicker .add-on {
  cursor: pointer;
}

.bootstrap-timepicker .add-on i {
  display: inline-block;
  width: 16px;
  height: 16px;
}

.bootstrap-timepicker-widget.dropdown-menu {
  padding: 4px;
}

.bootstrap-timepicker-widget.dropdown-menu.open {
  display: inline-block;
}

.bootstrap-timepicker-widget.dropdown-menu:before {
  border-bottom: 7px solid rgba(0, 0, 0, 0.2);
  border-right: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
  display: inline-block;
  position: absolute;
}

.bootstrap-timepicker-widget.dropdown-menu:after {
  border-bottom: 6px solid #fff;
  border-right: 6px solid transparent;
  border-right: 6px solid transparent;
  content: "";
  display: inline-block;
  position: absolute;
}

.bootstrap-timepicker-widget.timepicker-orient-left:before {
  right: 6px;
}

.bootstrap-timepicker-widget.timepicker-orient-left:after {
  right: 7px;
}

.bootstrap-timepicker-widget.timepicker-orient-right:before {
  left: 6px;
}

.bootstrap-timepicker-widget.timepicker-orient-right:after {
  left: 7px;
}

.bootstrap-timepicker-widget.timepicker-orient-top:before {
  top: -7px;
}

.bootstrap-timepicker-widget.timepicker-orient-top:after {
  top: -6px;
}

.bootstrap-timepicker-widget.timepicker-orient-bottom:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid #999;
}

.bootstrap-timepicker-widget.timepicker-orient-bottom:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #fff;
}

.bootstrap-timepicker-widget a.btn,
.bootstrap-timepicker-widget input {
  border-radius: 4px;
}

.bootstrap-timepicker-widget table {
  width: 100%;
  margin: 0;
}

.bootstrap-timepicker-widget table td {
  text-align: center;
  height: 30px;
  margin: 0;
  padding: 2px;
}

.bootstrap-timepicker-widget table td:not(.separator) {
  min-width: 30px;
}

.bootstrap-timepicker-widget table td span {
  width: 100%;
}

.bootstrap-timepicker-widget table td a {
  border: 1px transparent solid;
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 8px 0;
  outline: 0;
  color: #333;
}

.bootstrap-timepicker-widget table td a:hover {
  text-decoration: none;
  background-color: #eee;
  border-color: #ddd;
}

.bootstrap-timepicker-widget table td a i {
  margin-top: 2px;
  font-size: 14px;
  color: #262626;
}

.bootstrap-timepicker-widget table td input {
  width: 35px;
  margin: 0;
  text-align: center;
  padding: 5px;
}

.bootstrap-timepicker-widget .modal-content {
  padding: 4px;
}

@media (min-width: 767px) {
  .bootstrap-timepicker-widget.modal {
    width: 200px;
    margin-right: -100px;
  }
}
@media (max-width: 767px) {
  .bootstrap-timepicker {
    width: 100%;
  }

  .bootstrap-timepicker .dropdown-menu {
    width: 100%;
  }
}
/*#region wysiwyg*/
.wysiwyg-editor {
  max-height: 250px;
  height: 250px;
  background-color: white;
  border-collapse: separate;
  border: 1px solid #ccc;
  padding: 4px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
  box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
  overflow: scroll;
  outline: none;
}

.wysiwyg-toolbar {
  margin-bottom: 10px;
}

.wysiwyg-toolbar .btn-active {
  color: #444 !important;
  background-color: #e5e5e5;
}

.wysiwyg-toolbar .dropdown-menu {
  padding: 5px;
}

.wysiwyg-toolbar .btn-group {
  margin-bottom: 5px;
}

.wysiwyg-voiceBtn {
  width: 20px;
  color: transparent !important;
  background-color: transparent !important;
  -webkit-transform: scale(2, 2);
  -moz-transform: scale(2, 2);
  -o-transform: scale(2, 2);
  -ms-transform: scale(2, 2);
  transform: scale(2, 2);
  border: transparent !important;
  cursor: pointer;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

div[data-role=editor-toolbar] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*#endregion wysiwyg*/
/*#region Summernote*/
.note-editor {
  border: 1px solid #d5d5d5;
}

.note-editor .note-dropzone {
  position: absolute;
  z-index: 1;
  display: none;
  color: #87cefa;
  background-color: white;
  border: 2px dashed #87cefa;
  opacity: 0.95;
  pointer-event: none;
}

.note-editor .note-dropzone .note-dropzone-message {
  display: table-cell;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.note-editor .note-dropzone.hover {
  color: var(--main-color);
  border: 2px dashed var(--main-color);
}

.note-editor.dragover .note-dropzone {
  display: table;
}

.note-editor.fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1050;
  width: 100%;
}

.note-editor.fullscreen .note-editable {
  background-color: white;
}

.note-editor.fullscreen .note-resizebar {
  display: none;
}

.note-editor.codeview .note-editable {
  display: none;
}

.note-editor.codeview .note-codable {
  display: block;
}

.note-editor .note-toolbar {
  padding-bottom: 5px;
  padding-right: 5px;
  margin: 0;
  background-color: #fbfbfb;
  border-bottom: 1px solid #d5d5d5;
}

.note-editor .note-toolbar > .btn-group {
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 0;
}

.note-editor .note-toolbar > .input-group {
  float: none;
}

.note-editor .note-toolbar .note-table .dropdown-menu {
  min-width: 0;
  padding: 5px;
}

.note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker {
  font-size: 18px;
}

.note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-mousecatcher {
  position: absolute !important;
  z-index: 3;
  width: 10em;
  height: 10em;
  cursor: pointer;
}

.note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-unhighlighted {
  position: relative !important;
  z-index: 1;
  width: 5em;
  height: 5em;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat;
}

.note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-highlighted {
  position: absolute !important;
  z-index: 2;
  width: 1em;
  height: 1em;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat;
}

.note-editor .note-toolbar .note-style h1,
.note-editor .note-toolbar .note-style h2,
.note-editor .note-toolbar .note-style h3,
.note-editor .note-toolbar .note-style h4,
.note-editor .note-toolbar .note-style h5,
.note-editor .note-toolbar .note-style h6,
.note-editor .note-toolbar .note-style blockquote {
  margin: 0;
}

.note-editor .note-toolbar .note-color .dropdown-toggle {
  width: 20px;
  padding-right: 5px;
}

.note-editor .note-toolbar .note-color .dropdown-menu {
  min-width: 290px;
}

.note-editor .note-toolbar .note-color .dropdown-menu .btn-group {
  margin: 0;
}

.note-editor .note-toolbar .note-color .dropdown-menu .btn-group:first-child {
  margin: 0 5px;
}

.note-editor .note-toolbar .note-color .dropdown-menu .btn-group .note-palette-title {
  margin: 2px 7px;
  font-size: 12px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.note-editor .note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset {
  padding: 0 3px;
  margin: 5px;
  font-size: 12px;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.note-editor .note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset:hover {
  background: #eee;
}

.note-editor .note-toolbar .note-para .dropdown-menu {
  min-width: 216px;
  padding: 5px;
}

.note-editor .note-toolbar .note-para .dropdown-menu > div:first-child {
  margin-left: 5px;
}

.note-editor .note-statusbar {
  background-color: #f5f5f5;
}

.note-editor .note-statusbar .note-resizebar {
  width: 100%;
  height: 8px;
  cursor: s-resize;
  border-top: 1px solid #d5d5d5;
}

.note-editor .note-statusbar .note-resizebar .note-icon-bar {
  width: 20px;
  margin: 1px auto;
  border-top: 1px solid #d5d5d5;
}

.note-editor .note-popover .popover {
  max-width: none;
}

.note-editor .note-popover .popover .popover-content {
  padding: 5px;
}

.note-editor .note-popover .popover .popover-content a {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.note-editor .note-popover .popover .popover-content .btn-group + .btn-group {
  margin-right: 5px;
}

.note-editor .note-popover .popover .arrow {
  right: 20px;
}

.note-editor .note-handle .note-control-selection {
  position: absolute;
  display: none;
  border: 1px solid black;
}

.note-editor .note-handle .note-control-selection > div {
  position: absolute;
}

.note-editor .note-handle .note-control-selection .note-control-selection-bg {
  width: 100%;
  height: 100%;
  background-color: black;
  -webkit-opacity: 0.3;
  -khtml-opacity: 0.3;
  -moz-opacity: 0.3;
  opacity: 0.3;
  -ms-filter: alpha(opacity=30);
  filter: alpha(opacity=30);
}

.note-editor .note-handle .note-control-selection .note-control-handle {
  width: 7px;
  height: 7px;
  border: 1px solid black;
}

.note-editor .note-handle .note-control-selection .note-control-holder {
  width: 7px;
  height: 7px;
  border: 1px solid black;
}

.note-editor .note-handle .note-control-selection .note-control-sizing {
  width: 7px;
  height: 7px;
  background-color: white;
  border: 1px solid black;
}

.note-editor .note-handle .note-control-selection .note-control-nw {
  top: -5px;
  right: -5px;
  border-right: 0;
  border-bottom: 0;
}

.note-editor .note-handle .note-control-selection .note-control-ne {
  top: -5px;
  right: -5px;
  border-bottom: 0;
  border-right: none;
}

.note-editor .note-handle .note-control-selection .note-control-sw {
  bottom: -5px;
  right: -5px;
  border-top: 0;
  border-right: 0;
}

.note-editor .note-handle .note-control-selection .note-control-se {
  right: -5px;
  bottom: -5px;
  cursor: se-resize;
}

.note-editor .note-handle .note-control-selection .note-control-selection-info {
  right: 0;
  bottom: 0;
  padding: 5px;
  margin: 5px;
  font-size: 12px;
  color: white;
  background-color: black;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-opacity: 0.7;
  -khtml-opacity: 0.7;
  -moz-opacity: 0.7;
  opacity: 0.7;
  -ms-filter: alpha(opacity=70);
  filter: alpha(opacity=70);
}

.note-editor .note-dialog > div {
  display: none;
}

.note-editor .note-dialog .note-image-dialog .note-dropzone {
  min-height: 100px;
  margin-bottom: 10px;
  font-size: 30px;
  line-height: 4;
  color: lightgray;
  text-align: center;
  border: 4px dashed lightgray;
}

.note-editor .note-dialog .note-help-dialog {
  font-size: 12px;
  color: #ccc;
  background: transparent;
  background-color: #222 !important;
  border: 0;
  -webkit-opacity: 0.9;
  -khtml-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
  -ms-filter: alpha(opacity=90);
  filter: alpha(opacity=90);
}

.note-editor .note-dialog .note-help-dialog .modal-content {
  background: transparent;
  border: 1px solid white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.note-editor .note-dialog .note-help-dialog a {
  font-size: 12px;
  color: white;
}

.note-editor .note-dialog .note-help-dialog .title {
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  border-bottom: white 1px solid;
}

.note-editor .note-dialog .note-help-dialog .modal-close {
  font-size: 14px;
  color: #dd0;
  cursor: pointer;
}

.note-editor .note-dialog .note-help-dialog .note-shortcut-layout {
  width: 100%;
}

.note-editor .note-dialog .note-help-dialog .note-shortcut-layout td {
  vertical-align: top;
}

.note-editor .note-dialog .note-help-dialog .note-shortcut {
  margin-top: 8px;
}

.note-editor .note-dialog .note-help-dialog .note-shortcut th {
  font-size: 13px;
  color: #dd0;
  text-align: right;
}

.note-editor .note-dialog .note-help-dialog .note-shortcut td:first-child {
  min-width: 110px;
  padding-left: 10px;
  font-family: "Courier New";
  color: #dd0;
  text-align: left;
}

.note-editor .note-editable {
  padding: 10px;
  overflow: auto;
  outline: 0;
  background-color: #fff;
}

.note-editor .note-editable[contenteditable=false] {
  background-color: #e5e5e5;
}

.note-editor .note-codable {
  display: none;
  width: 100%;
  padding: 10px;
  margin-bottom: 0;
  font-family: Menlo, Monaco, monospace, sans-serif;
  font-size: 14px;
  color: #ccc;
  background-color: #222;
  border: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  resize: none;
}

.note-editor .dropdown-menu {
  min-width: 90px;
}

.note-editor .dropdown-menu.right {
  left: 0;
  right: auto;
}

.note-editor .dropdown-menu.right::before {
  left: 9px;
  right: auto !important;
}

.note-editor .dropdown-menu.right::after {
  left: 10px;
  right: auto !important;
}

.note-editor .dropdown-menu li a i {
  color: var(--main-color);
  visibility: hidden;
}

.note-editor .dropdown-menu li a.checked i {
  visibility: visible;
}

.note-editor .note-fontsize-10 {
  font-size: 10px;
}

.note-editor .note-color-palette {
  line-height: 1;
}

.note-editor .note-color-palette div .note-color-btn {
  width: 17px;
  height: 17px;
  padding: 0;
  margin: 0;
  border: 1px solid #fff;
}

.note-editor .note-color-palette div .note-color-btn:hover {
  border: 1px solid #000;
}

/*#region Bootstrap Validator*/
.bv-form .help-block {
  margin-bottom: 0;
}

.nav-tabs li.bv-tab-success > a {
  color: #53a93f;
}

.nav-tabs li.bv-tab-error > a {
  color: #d73d32;
}

/*--------Pages and Widgets--------*/
/*#region Login Page*/
.login-container {
  position: relative;
  margin: 10% auto;
  max-width: 300px;
}

.login-container .loginbox {
  position: relative;
  width: 300px !important;
  height: auto !important;
  padding: 0 0 20px 0;
  -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
}

.login-container .loginbox .loginbox-title {
  position: relative;
  text-align: center;
  width: 100%;
  height: 35px;
  padding-top: 10px;
  font-family: Arial;
  font-size: 20px;
  font-weight: normal;
  color: #444;
}

.login-container .loginbox .loginbox-social {
  padding: 0 10px 10px;
  text-align: center;
}

.login-container .loginbox .loginbox-social .social-title {
  font-size: 14px;
  font-weight: 500;
  color: darkgray;
  margin-top: 10px;
}

.login-container .loginbox .loginbox-social .social-buttons {
  height: 80px;
  padding: 15px 35px;
  text-align: center;
}

.login-container .loginbox .loginbox-social .social-buttons .button-facebook {
  float: right;
  border: 2px solid #3b5998;
  color: #3b5998;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-left: 30px;
  background-color: #fff;
}

.login-container .loginbox .loginbox-social .social-buttons .button-facebook i {
  font-size: 26px;
  line-height: 50px;
}

.login-container .loginbox .loginbox-social .social-buttons .button-twitter {
  float: right;
  border: 2px solid #29c1f6;
  color: #29c1f6;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-left: 30px;
  background-color: #fff;
}

.login-container .loginbox .loginbox-social .social-buttons .button-twitter i {
  font-size: 26px;
  line-height: 50px;
}

.login-container .loginbox .loginbox-social .social-buttons .button-google {
  border: 2px solid #ef4f1d;
  color: #ef4f1d;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: #fff;
}

.login-container .loginbox .loginbox-social .social-buttons .button-google i {
  font-size: 26px;
  line-height: 50px;
}

.login-container .loginbox .loginbox-or {
  position: relative;
  text-align: center;
  height: 20px;
}

.login-container .loginbox .loginbox-or .or {
  position: absolute;
  top: 0;
  -lh-property: 0;
  right: -webkit-calc(50% - 25px);
  right: -moz-calc(50% - 25px);
  right: calc(50% - 25px);
  width: 50px;
  height: 20px;
  background-color: #fff;
  color: #999;
  margin: 0 auto;
}

.login-container .loginbox .loginbox-or .or-line {
  position: absolute;
  height: 1px;
  top: 10px;
  right: 40px;
  left: 40px;
  background-color: #ccc;
}

.login-container .loginbox .loginbox-textbox {
  padding: 10px 40px;
}

.login-container .loginbox .loginbox-textbox .form-control {
  -webkit-border-radius: 3px !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 3px !important;
  -moz-background-clip: padding !important;
  border-radius: 3px !important;
  background-clip: padding-box !important;
}

.login-container .loginbox .loginbox-forgot {
  padding-right: 40px;
}

.login-container .loginbox .loginbox-forgot a {
  font-size: 11px;
  color: #666;
}

.login-container .loginbox .loginbox-submit {
  padding: 10px 40px;
}

.login-container .loginbox .loginbox-signup {
  text-align: center;
  padding-top: 10px;
}

.login-container .loginbox .loginbox-signup a {
  font-size: 13px;
  color: #666;
}

.login-container .logobox {
  width: 300px !important;
  height: 50px !important;
  padding: 5px;
  margin-top: 15px;
  -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  text-align: right;
}

/*#region Register*/
.register-container {
  position: relative;
  margin: 8% auto;
  max-width: 350px;
}

.register-container .registerbox {
  position: relative;
  width: 350px !important;
  height: 560px !important;
  padding: 0;
  -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
}

.register-container .registerbox .registerbox-title {
  position: relative;
  text-align: right;
  width: 100%;
  height: 35px;
  padding: 20px 20px 0;
  font-family: Arial;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: normal;
  color: #444;
}

.register-container .registerbox .registerbox-caption {
  font-size: 14px;
  font-weight: 500;
  color: darkgray;
  padding: 15px 20px 0;
}

.register-container .registerbox .registerbox-textbox {
  padding: 10px 20px;
}

.register-container .registerbox .registerbox-textbox .form-control {
  -webkit-border-radius: 3px !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 3px !important;
  -moz-background-clip: padding !important;
  border-radius: 3px !important;
  background-clip: padding-box !important;
}

.register-container .registerbox .registerbox-submit {
  padding: 0 20px;
}

.register-container .logobox {
  width: 350px !important;
  height: 50px !important;
  padding: 5px;
  margin-top: 15px;
  -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  text-align: right;
}

/*#region Lockscreen Page*/
.lock-container {
  margin: 15% auto;
  max-width: 300px;
}

.lock-container .lock-box {
  position: relative;
  background: #fff;
  width: 280px;
  height: 170px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(bottom, #fff, #f3f3f3);
  background-image: -moz-linear-gradient(bottom, #fff, #f3f3f3);
  background-image: -o-linear-gradient(bottom, #fff, #f3f3f3);
  background-image: linear-gradient(to top, #fff, #f3f3f3);
}

.lock-container .lock-box .lock-username {
  position: absolute;
  height: 50px;
  width: 100%;
  line-height: 50px;
  top: 60px;
  text-align: center;
  color: #999;
}

.lock-container .lock-box img {
  position: absolute;
  -lh-property: 0;
  right: -webkit-calc(50% - 64px);
  right: -moz-calc(50% - 64px);
  right: calc(50% - 64px);
  top: -64px;
  border: 3px solid #fff;
  width: 128px;
  height: 128px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.lock-container .lock-box .lock-password {
  position: absolute;
  top: 115px;
  text-align: center;
  -lh-property: 0;
  right: -webkit-calc(50% - 114px);
  right: -moz-calc(50% - 114px);
  right: calc(50% - 114px);
}

.lock-container .lock-box .lock-password input {
  background-color: #fff;
  border-color: #e5e5e5;
  -webkit-border-radius: 4px !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 4px !important;
  -moz-background-clip: padding !important;
  border-radius: 4px !important;
  background-clip: padding-box !important;
  text-align: center;
  padding-right: 25px;
}

.lock-container .lock-box .btn-lock,
.lock-container .lock-box .btn-lock:hover {
  background: #fff;
  color: var(--main-color);
  margin-top: -8px;
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.lock-container .lock-box .btn-lock i:before,
.lock-container .lock-box .btn-lock:hover i:before {
  font-size: 18px;
}

.lock-container .signinbox {
  width: 280px !important;
  height: 50px !important;
  padding: 15px;
  margin-top: 15px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  text-align: center;
}

.lock-container .signinbox a {
  font-size: 13px;
  color: var(--main-color);
  padding-right: 5px;
  cursor: pointer;
}

/*#region Pricing Tables*/
.pricing-container {
  padding: 20px;
  -webkit-text-shadow: gba(0, 0, 0, 0.2) 1px 1px 1px;
  text-shadow: gba(0, 0, 0, 0.2) 1px 1px 1px;
}

.pricing-container [class*=col-] {
  padding-right: 5px;
  padding-left: 5px;
}

.pricing-container .plan {
  text-align: center;
  /*font: 13px @number-fonts;*/
  background: #fff;
  color: #333;
  padding: 0;
  width: 100%;
  float: right;
  _display: inline;
  /* IE6 double margin fix */
  position: relative;
  margin: 0 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(bottom, #fff, #f3f3f3);
  background-image: -moz-linear-gradient(bottom, #fff, #f3f3f3);
  background-image: -o-linear-gradient(bottom, #fff, #f3f3f3);
  background-image: linear-gradient(to top, #fff, #f3f3f3);
}

.pricing-container .plan .header {
  position: relative;
  font-size: 20px;
  font-weight: normal;
  text-transform: uppercase;
  padding: 15px;
  margin: 0;
  border-bottom: 3px solid;
}

.pricing-container .plan .price {
  font-size: 26px;
  padding: 5px 5px 0;
  background-color: #fff;
  -webkit-text-shadow: none;
  text-shadow: none;
}

.pricing-container .plan .monthly {
  font-size: 12px;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #999;
  background-color: #fff;
  padding-bottom: 10px;
  -webkit-text-shadow: none;
  text-shadow: none;
}

.pricing-container .plan ul {
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.pricing-container .plan ul li {
  padding: 10px 0;
}

.pricing-container .plan ul li p {
  margin: 0 20px;
  text-align: right;
}

.pricing-container .plan .signup {
  position: relative;
  padding: 8px 17px;
  color: #fff;
  font: bold 15px "Roboto", Arial;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  background-color: var(--main-color);
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
  opacity: 0.9;
  margin: 15px;
}

.pricing-container .plan .signup:hover {
  opacity: 1;
}

.pricing-container .plan .signup:active {
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3) inset;
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3) inset;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3) inset;
}

.pricing-container .popular-plan {
  top: -20px;
  padding: 0 0 25px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.pricing-container .popular-plan .header {
  padding: 35px 15px 15px;
}

.plan-circular {
  margin: 10px auto;
  text-align: center;
}

.plan-circular .plan-title {
  color: #fff;
}

.plan-circular .title-devider {
  margin: 10px 40%;
  border-color: #fff;
}

.plan-circular .plan-body {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #fff;
  border: 10px solid rgba(255, 255, 255, 0.3);
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  margin: 0 auto;
  font-family: "Open Sans", sans-serif;
}

.plan-circular .plan-body .plan-price {
  position: absolute;
  top: 33px;
  left: 35px;
  font-size: 40px;
  color: #555;
}

.plan-circular .plan-body .plan-currency {
  position: absolute;
  top: 33px;
  left: 80px;
  font-size: 26px;
  color: #777;
}

.plan-circular .plan-body .plan-month {
  position: absolute;
  top: 80px;
  left: 38px;
  font-size: 12px;
  color: #999;
}

.plan-circular .plan-tag {
  width: 25px;
  height: 40px;
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
  margin: 0 auto;
  margin-top: -15px;
}

.plan-circular .plan-tag .tag-icon {
  margin-top: 20px;
  font-size: 15px;
  color: #fff;
}

/*#region Invoice Page*/
.invoice-container .table-bordered thead > tr {
  background-color: #fff !important;
  background-image: none !important;
}

.invoice-container .panel {
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
}

.invoice-container .panel .panel-heading {
  background-color: #fff;
}

.invoice-container .panel .panel-heading h1,
.invoice-container .panel .panel-heading h2,
.invoice-container .panel .panel-heading h3,
.invoice-container .panel .panel-heading h4,
.invoice-container .panel .panel-heading h5,
.invoice-container .panel .panel-heading h6 {
  margin-bottom: 0px;
}

.invoice-container ul {
  list-style: none;
  padding-right: 0;
}

.invoice-container ul li {
  line-height: 22px;
}

/*#region Timeline*/
.timeline {
  list-style: none;
  padding: 0;
  position: relative;
}

.timeline > li {
  margin-bottom: 20px;
  position: relative;
}

.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}

.timeline > li:after {
  clear: both;
}

.timeline > li > .timeline-datetime {
  color: #737373;
  position: absolute;
  right: 55%;
  top: 6px;
  text-align: right;
  padding: 10px;
}

.timeline > li > .timeline-datetime .timeline-time,
.timeline > li > .timeline-datetime .timeline-date {
  display: block;
  font-size: 11px;
  font-family: Arial;
}

.timeline > li > .timeline-datetime .timeline-time {
  font-size: 14px;
  font-weight: bold;
}

.timeline > li > .timeline-panel {
  background-color: #fbfbfb;
  -lh-property: 0;
  width: -webkit-calc(50% - 45px);
  width: -moz-calc(50% - 45px);
  width: calc(50% - 45px);
  float: right;
  border-radius: 2px;
  padding: 0;
  position: relative;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline > li > .timeline-panel .timeline-header .timeline-title {
  display: block;
  padding: 10px 20px 0;
  min-width: 200px;
  font-size: 14px;
  font-family: "Roboto", Arial;
  font-weight: 700;
}

.timeline > li > .timeline-panel .timeline-header .timeline-datetime {
  position: absolute;
  top: 5px;
  left: 10px;
  font-family: "Roboto", Arial;
  font-size: 13px;
  display: none;
}

.timeline > li > .timeline-panel .timeline-body {
  padding: 10px 20px 20px;
  line-height: 22px;
}

.timeline > li > .timeline-panel .timeline-body > p,
.timeline > li > .timeline-panel .timeline-body > ul {
  margin-bottom: 0;
}

.timeline > li > .timeline-panel .timeline-body > p + p {
  margin-top: 5px;
}

.timeline > li > .timeline-panel .timeline-footer {
  padding: 5px 20px 10px;
  border-top: 1px solid #eee;
}

.timeline > li > .timeline-panel .timeline-footer .footer-registrar {
  font-size: 12px;
  color: #555;
}

.timeline > li > .timeline-panel:before {
  position: absolute;
  top: 16px;
  left: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-right: 15px solid #e5e5e5;
  border-left: 0 solid #e5e5e5;
  border-bottom: 15px solid transparent;
  content: " ";
}

.timeline > li > .timeline-panel:after {
  position: absolute;
  top: 17px;
  left: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-right: 14px solid #fbfbfb;
  border-left: 0 solid #fbfbfb;
  border-bottom: 14px solid transparent;
  content: " ";
}

.timeline > li .timeline-badge {
  width: 50px;
  height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 6px;
  right: 50%;
  margin-right: -25px;
  background-image: linear-gradient(to bottom, #eee 0, #fbfbfb 100%);
  z-index: 100;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  color: #444;
}

.timeline > li .timeline-badge .badge-picture {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
}

.timeline > li .timeline-badge i {
  line-height: 50px;
}

.timeline > li .timeline-badge[class*=bg-] {
  background-image: none !important;
  color: #fff;
}

.timeline > li.timeline-inverted > .timeline-datetime {
  right: auto;
  left: 55%;
  text-align: right;
}

.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
  border-right-width: 0;
  border-right-width: 15px;
  right: -15px;
  right: auto;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
  border-right-width: 0;
  border-right-width: 14px;
  right: -14px;
  left: auto;
}

.timeline > li.timeline-node {
  width: 150px;
  margin: 0px auto 20px;
  text-align: center;
}

@media (max-width: 767px) {
  .timeline:before {
    right: 40px;
  }

  .timeline > li > .timeline-panel {
    -lh-property: 0;
    width: -webkit-calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    width: calc(100% - 90px);
  }

  .timeline > li > .timeline-badge {
    right: 15px;
    margin-right: 0;
    top: 6px;
  }

  .timeline > li > .timeline-panel {
    float: right;
  }

  .timeline > li > .timeline-panel:before {
    border-right-width: 0;
    border-right-width: 15px;
    right: -15px;
    left: auto;
  }

  .timeline > li > .timeline-panel:after {
    border-right-width: 0;
    border-right-width: 14px;
    right: -14px;
    left: auto;
  }

  .timeline > li > .timeline-panel .timeline-header .timeline-title {
    top: 5px;
  }

  .timeline > li > .timeline-panel .timeline-header .timeline-datetime {
    display: block;
  }

  .timeline > li > .timeline-datetime {
    display: none;
  }

  .timeline > li.timeline-node {
    margin: 0 0 20px -35px;
  }
}
@media (max-width: 500px) {
  .timeline > li > .timeline-panel .timeline-header .timeline-datetime {
    position: relative;
    padding: 5px 30px 0;
    margin: 0;
  }

  .timeline > li > .timeline-panel .timeline-body {
    padding: 20px 20px 20px;
  }
}
/*#region Profile*/
.profile-container .profile-header {
  min-height: 175px;
  margin: 15px 15px 0;
  background-color: #f3f3f3;
  border-radius: 7px;
  border: 1px solid #eee;
}

.profile-container .profile-header .header-avatar {
  width: 125px;
  height: 125px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  border: 5px solid #f5f5f5;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  margin: 25px auto;
}

.profile-container .profile-header .profile-info {
  min-height: 175px;
  padding: 15px 40px 35px 0;
}

.profile-container .profile-header .profile-info .header-fullname {
  font: 21px "Roboto", Arial;
  margin-top: 27px;
  display: inline-block;
}

.profile-container .profile-header .profile-stats .btn-follow {
  margin-top: 25px;
  width: 100%;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.profile-container .profile-header .profile-info .header-information {
  line-height: 23px;
  margin-top: 15px;
  text-align: justify;
}

.profile-container .profile-header .profile-stats {
  min-height: 175px;
  padding-top: 50px;
  text-align: center;
}

.profile-container .profile-header .profile-stats .stats-col {
  margin: 30px 0;
  text-align: center;
}

.profile-container .profile-header .profile-stats .stats-col:not(:last-child) {
  border-left: 1px solid #eee;
}

.profile-container .profile-header .profile-stats .stats-col .stats-value {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  font-family: "Roboto", Arial;
}

.profile-container .profile-header .profile-stats .stats-col .stats-title {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.profile-container .profile-header .profile-stats .inlinestats-col {
  padding-top: 15px;
  text-align: center;
  font-family: "Roboto", Arial;
  border-top: 1px solid #eee;
  min-height: 55px;
}

.profile-container .profile-header .profile-stats .inlinestats-col:not(:last-child) {
  border-left: 1px solid #eee;
}

.profile-container .profile-header .profile-stats .inlinestats-col i {
  margin-left: 2px;
}

.profile-container .profile-header .profile-contactinfo .title {
  margin-bottom: 5px;
  margin-top: 30px;
}

.profile-container .profile-header .profile-contactinfo .list-group-item {
  background: none !important;
  border: none;
  padding-bottom: 0;
  margin-top: 5px;
  padding-right: 0px;
  padding-left: 5px;
}

.profile-container .profile-body .tab-content {
  margin-top: 30px;
  box-shadow: none;
  border: 0;
}

.profile-container .profile-body .setting-header {
  margin-bottom: 25px;
}

.profile-container .profile-contacts {
  padding: 25px;
}

.profile-container .profile-contacts .contact-badge i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  text-align: center;
  background-image: linear-gradient(to bottom, #eee 0, #fbfbfb 100%);
  z-index: 100;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  color: #444;
}

.profile-container .profile-contacts .contact-badge span {
  font-size: 26px;
  margin-right: 20px;
  font-weight: 300;
}

.profile-container .profile-contacts .contact-info p {
  padding: 10px 70px;
}

.profile-container #contact-map {
  margin: 20px;
  width: 400px;
  height: 400px;
  -webkit-border-radius: 100%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 100%;
  -moz-background-clip: padding;
  border-radius: 100%;
  background-clip: padding-box;
  border: #fbfbfb 5px solid;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.profile-container .profile-badge i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  text-align: center;
  background-image: linear-gradient(to bottom, #eee 0, #fbfbfb 100%);
  z-index: 100;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  color: #444;
}

.profile-container .profile-badge span {
  font-size: 26px;
  margin-right: 20px;
  font-weight: 300;
}

.profile-container .profile-overview {
  padding: 5px;
}

.profile-container .row-title {
  margin-right: -17px;
  margin-top: 50px;
}

.profile-container .timeline {
  padding-top: 35px;
  margin-top: -16px;
}

@media (max-width: 992px) {
  .profile-container .profile-header .profile-info {
    padding: 0 40px;
  }

  .profile-container .profile-header .profile-info .btn-follow {
    top: 28px;
  }

  .profile-container .profile-header .profile-stats .stats-col {
    border-left: 0;
  }
}
/*#region Comment*/
.comment {
  padding-top: 12px;
}

.comment:first-child {
  padding-top: 0;
}

.comment > .comment {
  margin-right: 25px !important;
}

.comment .comment-avatar {
  position: relative;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  display: block;
  float: right;
  height: 32px;
  width: 32px;
}

.comment:not(.main-comment) .comment-avatar {
  padding: 2px;
  background: radial-gradient(circle, white 25%, #ccc 100%);
}

.main-comment .comment-avatar {
  position: relative;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  display: block;
  float: right;
  height: 50px;
  width: 50px;
}

.comment .comment-header {
  font-size: 12px;
  padding-bottom: 12px;
}

.comment .comment-header span {
  color: #777;
  display: inline-block;
  font-size: 11px;
  margin-right: 5px;
}

.comment .comment-body {
  float: none;
  margin-right: 40px;
  position: relative;
}

.main-comment .comment-body {
  float: none;
  margin-right: 60px;
  position: relative;
}

.comment .comment-text {
  border: 1px solid #d5d5d5;
  border-radius: 2px;
  padding: 7px 12px 8px;
}

.comment .comment-footer {
  display: block;
  font-size: 12px;
  padding: 4px 12px 0;
}

.comment .comment-footer i {
  font-size: 13px;
  margin-left: 7px;
}

.comment .comment-footer,
.comment .comment-footer a {
  color: #d0d0d0;
}

.comment .comment-footer a:hover {
  color: var(--main-color);
}

/*#region Mail*/
.mail-container {
  position: relative;
}

.mail-container .mail-sidebar,
.mail-container .mail-body {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.mail-container .mail-sidebar {
  width: 200px;
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  min-height: 100%;
  background: #fbfbfb;
  border-left: 1px solid #ebebeb;
}

.mail-container .mail-sidebar .mail-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mail-container .mail-sidebar .mail-menu > li {
  margin: 0;
  padding: 0;
}

.mail-container .mail-sidebar .mail-menu > li a {
  color: #777;
  display: block;
  padding: 10px 10px 10px 25px;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  font-size: 13px;
}

.mail-container .mail-sidebar .mail-menu > li a:hover {
  text-decoration: none;
  color: #444;
}

.mail-container .mail-sidebar .mail-menu > li a i {
  margin-left: 10px;
  font-size: 13px;
}

.mail-container .mail-sidebar .mail-menu > li a .badge {
  font-size: 13px;
}

.mail-container .mail-sidebar .mail-menu > li a .badge-tag {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
}

.mail-container .mail-sidebar .mail-menu > li:hover a {
  background: #fff;
}

.mail-container .mail-sidebar .mail-menu > li.active a {
  background: #f3f3f3;
  font-weight: bold;
}

.mail-container .mail-sidebar .mail-menu > li.divider {
  padding: 0;
  height: 1px;
  margin: 9px 0 3px;
  background: #e5e5e5;
}

.mail-container .mail-sidebar .mail-menu > li.menu-title {
  margin-top: 25px;
  font-size: 11px;
  text-transform: uppercase;
  padding-right: 25px;
  font-weight: 700;
}

.mail-container .mail-header {
  position: relative;
  height: 38px;
  margin-right: 200px;
  padding: 0;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}

.mail-container .mail-header .header-buttons {
  list-style: none;
  margin-bottom: 0;
  display: inline-block;
  float: right;
  text-align: right;
  height: 38px;
  padding: 0 2px 0 7px;
}

.mail-container .mail-header .header-buttons li {
  float: right;
  position: relative;
  height: 38px;
  width: 38px;
  padding: 4px;
  text-align: center;
}

.mail-container .mail-header .header-buttons li a {
  display: block;
  width: 28px;
  height: 28px;
  border: 1px solid #d0d0d0;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
}

.mail-container .mail-header .header-buttons li a:hover {
  cursor: pointer;
  border-color: var(--main-color);
}

.mail-container .mail-header .header-buttons li a:hover i {
  color: var(--main-color);
}

.mail-container .mail-header .header-buttons li a i {
  line-height: 24px;
  color: #d0d0d0;
  font-size: 14px;
}

.mail-container .mail-header .header-buttons li a i.fa {
  line-height: 28px;
  font-size: 16px;
}

.mail-container .mail-header .header-buttons li.search {
  width: 150px;
}

.mail-container .mail-header .header-buttons li.search input[type=text] {
  border-color: #e5e5e5;
  -webkit-border-radius: 5px !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 5px !important;
  -moz-background-clip: padding !important;
  border-radius: 5px !important;
  background-clip: padding-box !important;
}

.mail-container .mail-header .pages {
  float: left;
  font-style: italic;
  line-height: 38px;
  color: #d0d0d0;
}

.mail-container .mail-header .draft {
  float: left;
  margin-left: 15px;
  font-style: italic;
  line-height: 38px;
  color: #d0d0d0;
}

.mail-container .mail-header .mail-title {
  float: right;
  margin-right: 15px;
  line-height: 36px;
  color: #555;
}

.mail-container .mail-body {
  position: relative;
  margin-right: 200px;
  padding: 0;
  overflow: hidden;
}

.mail-container .mail-body .mail-info {
  width: 100%;
  background: #f5f5f5;
  display: table;
  border-spacing: 0;
  border-collapse: collapse;
  border-bottom: 1px solid #ebebeb;
}

.mail-container .mail-body .mail-info .mail-sender,
.mail-container .mail-body .mail-info .mail-date {
  display: table-cell;
  width: 50%;
  color: #737373;
  padding: 8px 10px 7px;
}

.mail-container .mail-body .mail-info .mail-sender.mail-sender a:hover,
.mail-container .mail-body .mail-info .mail-date.mail-sender a:hover {
  text-decoration: none;
}

.mail-container .mail-body .mail-info .mail-sender.mail-sender span,
.mail-container .mail-body .mail-info .mail-date.mail-sender span {
  font-weight: bold;
  color: #fb6e52;
}

.mail-container .mail-body .mail-info .mail-sender.mail-sender img,
.mail-container .mail-body .mail-info .mail-date.mail-sender img {
  margin-left: 5px;
  border: 2px solid #e5e5e5;
}

.mail-container .mail-body .mail-info .mail-sender.mail-date,
.mail-container .mail-body .mail-info .mail-date.mail-date {
  text-align: left;
}

.mail-container .mail-body .mail-text {
  border-bottom: 1px solid #ebebeb;
  padding: 15px;
}

.mail-container .mail-body .mail-attachments {
  padding: 10px;
  border-bottom: 1px solid #ebebeb;
}

.mail-container .mail-body .mail-attachments h4 {
  margin-bottom: 30px;
  line-height: 1;
}

.mail-container .mail-body .mail-attachments h4 span {
  zoom: 1;
  filter: alpha(opacity=40);
  -webkit-opacity: 0.4;
  -moz-opacity: 0.4;
  opacity: 0.4;
}

.mail-container .mail-body .mail-attachments ul {
  text-align: right;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mail-container .mail-body .mail-attachments ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
  margin-left: 30px;
  margin-bottom: 10px;
}

.mail-container .mail-body .mail-attachments ul li > a {
  display: block;
}

.mail-container .mail-body .mail-attachments ul li > a img {
  position: relative;
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}

.mail-container .mail-body .mail-attachments ul li > a.thumb {
  position: relative;
}

.mail-container .mail-body .mail-attachments ul li > a.thumb:after {
  font-family: "FontAwesome";
  content: "\f00d";
  display: block;
  position: absolute;
  right: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-right: -20px;
  margin-top: -20px;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  vertical-align: text-top;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  -webkit-border-radius: 4px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 4px;
  -moz-background-clip: padding;
  border-radius: 4px;
  background-clip: padding-box;
  zoom: 1;
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.mail-container .mail-body .mail-attachments ul li > a.thumb:hover:after {
  zoom: 1;
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.mail-container .mail-body .mail-attachments ul li > a.thumb.download:after {
  content: "\f019";
}

.mail-container .mail-body .mail-attachments ul li > a.name span {
  color: #666;
  float: left;
}

.mail-container .mail-body .mail-attachments ul li .links {
  display: block;
  font-size: 11px;
  color: #666;
  margin-top: 6px;
}

.mail-container .mail-body .mail-attachments ul li .links a {
  color: #666;
}

.mail-container .mail-body .mail-reply {
  border-bottom: 1px solid #ebebeb;
  padding: 10px;
}

.mail-container .mail-body .mail-reply .reply-form {
  padding: 10px;
  border: 1px solid #ebebeb;
  min-height: 200px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}

.mail-container .mail-body .mail-reply .reply-form > div a {
  font-weight: bold;
  color: #fb6e52;
}

.mail-container .mail-body .mail-compose {
  padding: 10px;
}

.mail-container .mail-body .mail-compose .note-editor {
  border: 1px solid #e5e5e5 !important;
}

.mail-container .mail-body .mail-compose .note-editor .btn-group > .btn.btn-default > .caret {
  border-top-color: #999;
  border-width: 4px;
  margin-top: -2px;
}

.mail-container .mail-body .mail-compose .note-editor .note-toolbar {
  border-bottom: 1px solid #e5e5e5;
}

.mail-container .mail-body .mail-compose .note-editor .note-toolbar .note-color .dropdown-toggle {
  width: 25px;
}

.mail-container .mail-body .mail-compose .note-editor .btn {
  color: #999 !important;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #e5e5e5;
  background-color: #fbfbfb;
}

.mail-container .mail-body .mail-compose .note-editor .btn:hover {
  color: #444 !important;
}

.mail-container .mail-body .mail-compose .form-group {
  position: relative;
  margin-bottom: 5px;
}

.mail-container .mail-body .mail-compose .form-group label {
  position: absolute;
  right: 10px;
  top: 7px;
  z-index: 10;
  color: #999;
}

.mail-container .mail-body .mail-compose .form-group input {
  border-color: #e5e5e5;
  border-right: 0;
  position: relative;
  padding-right: 100px;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: #fff;
}

.mail-container .mail-body .mail-compose .form-group input:focus {
  background-color: #fff;
}

.mail-container .mail-body .mail-compose .form-group .field-options {
  position: absolute;
  left: 5px;
  top: 5px;
}

.mail-container .mail-body .mail-compose .form-group .field-options a {
  display: inline-block;
  background: #f3f4f4;
  color: #7e8186;
  padding: 2px 6px;
  margin-right: 4px;
  text-align: center;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}

.mail-container .mail-body > div:last-child {
  border-bottom: 0;
}

.mail-container .mail-body .mail-list {
  list-style: none;
  margin-bottom: 0;
  display: block;
  width: 100%;
  padding: 0;
}

.mail-container .mail-body .mail-list .list-item {
  display: block;
  position: relative;
  height: 38px;
  padding: 0;
}

.mail-container .mail-body .mail-list .list-item:before {
  display: none;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 4px;
  max-width: 4px;
  overflow: hidden;
  background-color: var(--main-color);
}

.mail-container .mail-body .mail-list .list-item:hover:before {
  display: block;
}

.mail-container .mail-body .mail-list .list-item:nth-child(2n-1) {
  background: #f6f6f6;
}

.mail-container .mail-body .mail-list .list-item.unread > div.item-sender,
.mail-container .mail-body .mail-list .list-item.unread > div.item-subject {
  font-weight: bold;
}

.mail-container .mail-body .mail-list .list-item > div {
  position: absolute;
  height: 38px;
  top: 0;
}

.mail-container .mail-body .mail-list .list-item > div.item-check {
  right: 0;
  width: 42px;
  padding: 0 5px 0 15px;
  text-align: center;
  line-height: 38px;
}

.mail-container .mail-body .mail-list .list-item > div.item-star {
  line-height: 38px;
  width: 22px;
  right: 42px;
}

.mail-container .mail-body .mail-list .list-item > div.item-star a {
  font-size: 15px;
  color: #d0d0d0;
}

.mail-container .mail-body .mail-list .list-item > div.item-star a.stared {
  color: #ffce55;
}

.mail-container .mail-body .mail-list .list-item > div.item-sender {
  width: 184px;
  right: 64px;
  line-height: 38px;
  padding-right: 5px;
}

.mail-container .mail-body .mail-list .list-item > div.item-sender a {
  color: #444;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

.mail-container .mail-body .mail-list .list-item > div.item-sender a:hover {
  text-decoration: none;
}

.mail-container .mail-body .mail-list .list-item > div.item-subject {
  min-width: 200px;
  right: 250px;
  line-height: 38px;
  padding-right: 10px;
}

.mail-container .mail-body .mail-list .list-item > div.item-subject a {
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  color: #444;
}

.mail-container .mail-body .mail-list .list-item > div.item-subject a:hover {
  text-decoration: none;
}

.mail-container .mail-body .mail-list .list-item > div.item-time {
  left: 0;
  width: 120px;
  line-height: 38px;
  text-align: right;
  padding-left: 20px;
}

.mail-container .mail-body .mail-list .list-item > div.item-options {
  left: 120px;
  width: 38px;
  line-height: 38px;
  text-align: right;
  padding-left: 10px;
}

.mail-container .mail-body .mail-list .list-item > div.item-options a {
  color: #555;
  font-size: 19px;
}

.mail-container .mail-body .mail-list .list-item > div.item-options a:hover {
  text-decoration: none;
}

.mail-container.right-sidebar .mail-sidebar {
  border-right: 1px solid #ebebeb;
  border-left: 0;
}

.mail-container.right-sidebar .mail-body {
  float: right;
}

@media (max-width: 999px) {
  .mail-container .mail-body .mail-list .list-item {
    height: 70px;
    padding: 5px;
  }

  .mail-container .mail-body .mail-list .list-item > div.item-subject {
    top: 25px;
    right: 0;
    padding: 0 5px 0 15px;
    min-width: 100px;
  }

  .mail-container .mail-body .mail-list .list-item > div.item-options {
    left: 5px;
  }

  .mail-container .mail-body .mail-list .list-item > div.item-time {
    left: 30px;
  }
}
@media (max-width: 760px) {
  .mail-container .mail-sidebar {
    display: none;
  }

  .mail-container .mail-body,
.mail-container .mail-header {
    margin-right: 0;
  }
}
@media (max-width: 570px) {
  .mail-container .mail-header {
    height: 76px;
  }

  .mail-container .mail-header .header-buttons {
    display: block;
    float: none;
    margin: 0 auto;
  }
}
@media (max-width: 330px) {
  .mail-container .mail-body .mail-list .list-item {
    height: 90px;
  }

  .mail-container .mail-body .mail-list .list-item > div.item-subject {
    margin-top: 20px;
    margin-left: 50px;
    line-height: 20px;
    height: 50px;
  }

  .mail-container .mail-body .mail-list .list-item > div.item-time {
    display: none;
  }

  .mail-container .mail-header {
    text-align: center;
    height: 114px;
  }

  .mail-container .mail-header .pages {
    display: block;
    float: none;
    margin: 0 auto;
  }
}
/*#region FullCalendar*/
.fc {
  direction: ltr;
  text-align: right;
  background-color: #fff;
}

.fc table {
  border-collapse: collapse;
  border-spacing: 0;
}

.fc td,
.fc th {
  padding: 0;
  vertical-align: top;
}

.fc-header {
  padding: 10px;
}

.fc-header td {
  white-space: nowrap;
  padding: 10px;
}

.fc-header-left {
  width: 25%;
  text-align: right;
}

.fc-header-center {
  text-align: center;
}

.fc-header-right {
  width: 25%;
  text-align: left;
}

.fc-header-title {
  display: inline-block;
  vertical-align: top;
}

.fc .fc-header-space {
  padding-right: 10px;
}

.fc-header .fc-button {
  margin-left: -1px;
  vertical-align: top;
}

.fc-header .fc-corner-right,
.fc-header .ui-corner-right {
  margin-left: 0;
}

.fc-header .fc-state-hover,
.fc-header .ui-state-hover {
  z-index: 2;
}

.fc-header .fc-state-down {
  z-index: 3;
}

.fc-header .fc-state-active,
.fc-header .ui-state-active {
  z-index: 4;
}

.fc-content {
  clear: both;
}

.fc-view {
  width: 100%;
  overflow: hidden;
}

.fc-widget-content,
.fc-widget-header {
  border: 1px solid #e5e5e5;
  border-left: 0;
}

.fc-state-highlight {
  background: #ffc;
}

.fc-cell-overlay {
  background: #57b5e3;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.fc-button {
  position: relative;
  display: inline-block;
  padding: 1px 7px;
  overflow: hidden;
  height: 26px;
  line-height: 24px;
  white-space: nowrap;
  cursor: pointer;
}

.fc-state-default {
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
  position: relative;
  display: inline-block;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  font-size: 12px;
  color: #444;
  background-color: #fff;
  border: 1px solid #ccc;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: -moz-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: -o-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: linear-gradient(to bottom, #fff 0, #ededed 100%);
}

.fc-state-default.fc-corner-left {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.fc-state-default.fc-corner-right {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.fc-button-prev .fc-text-arrow,
.fc-button-next .fc-text-arrow {
  font-weight: bold;
}

.fc-state-hover,
.fc-state-down,
.fc-state-active,
.fc-state-disabled {
  color: #333;
  background-color: #e5e5e5;
}

.fc-state-down,
.fc-state-active {
  background-color: #e5e5e5;
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.05);
}

.fc-state-disabled {
  cursor: default;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  box-shadow: none;
}

.fc-event {
  border-style: solid;
  border-width: 0;
  font-size: 0.85em;
  cursor: default;
}

.fc-event-draggable,
a.fc-event {
  cursor: pointer;
}

a.fc-event {
  text-decoration: none;
}

.fc-rtl .fc-event {
  text-align: left;
}

.fc-event-skin {
  color: #fff;
  border-left: 0 !important;
  cursor: move;
}

.fc-event-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-width: 0;
  overflow: hidden;
}

.fc .ui-resizable-handle {
  display: block;
  position: absolute;
  z-index: 99999;
  overflow: hidden;
  font-size: 300%;
  line-height: 50%;
}

.fc-event-hori {
  border-width: 0 0 0 4px;
  margin-bottom: 3px;
  border-radius: 2px;
  padding: 5px 15px 5px 2px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: -moz-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: -o-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: linear-gradient(to bottom, #fff 0, #ededed 100%);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.fc-event-hori .ui-resizable-e {
  top: 0 !important;
  left: -3px !important;
  width: 7px !important;
  height: 100% !important;
  cursor: e-resize;
}

.fc-event-hori .ui-resizable-w {
  top: 0 !important;
  left: -3px !important;
  width: 7px !important;
  height: 100% !important;
  cursor: w-resize;
}

.fc-event-hori .ui-resizable-handle {
  _padding-bottom: 14px;
}

.fc-corner-left {
  margin-right: 1px;
}

.fc-corner-left .fc-button-inner,
.fc-corner-left .fc-event-inner {
  margin-right: -1px;
}

.fc-corner-right {
  margin-left: 1px;
}

.fc-corner-right .fc-button-inner,
.fc-corner-right .fc-event-inner {
  margin-left: -1px;
}

.fc-corner-top {
  margin-top: 1px;
}

.fc-corner-top .fc-event-inner {
  margin-top: -1px;
}

.fc-corner-bottom {
  margin-bottom: 1px;
}

.fc-corner-bottom .fc-event-inner {
  margin-bottom: -1px;
}

.fc-corner-left .fc-event-inner {
  border-right: 6px solid rgba(0, 0, 0, 0.15);
  padding-right: 2px;
}

.fc-corner-right .fc-event-inner {
  padding-right: 2px;
}

.fc-event-skin .fa:before {
  display: block;
  font-size: 14px;
  position: absolute;
  left: 4px;
  top: 3px;
}

table.fc-border-separate {
  border-collapse: separate;
}

.fc-border-separate td,
.fc-border-separate th {
  border-width: 1px 0 0 1px;
}

.fc-border-separate td.fc-last,
.fc-border-separate th.fc-last {
  border-left-width: 1px;
}

.fc-border-separate tr.fc-last td,
.fc-border-separate tr.fc-last th {
  border-bottom-width: 1px;
}

.fc-border-separate tbody tr.fc-first td,
.fc-border-separate tbody tr.fc-first th {
  border-top-width: 0;
}

.fc-grid th {
  text-align: center;
}

.fc-grid .fc-day-number {
  float: left;
  padding: 0 2px;
}

.fc-grid .fc-other-month .fc-day-number {
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.fc-grid .fc-day-content {
  clear: both;
  padding: 3px 4px 2px;
}

.fc-grid .fc-event-time {
  font-weight: 700;
}

.fc-rtl .fc-grid .fc-day-number {
  float: right;
}

.fc-rtl .fc-grid .fc-event-time {
  float: left;
}

.fc-agenda table {
  border-collapse: separate;
}

.fc-agenda-days th {
  text-align: center;
}

.fc-agenda .fc-agenda-axis {
  width: 50px;
  padding: 0 4px;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
  font-weight: 400;
}

.fc-agenda .fc-day-content {
  padding: 2px 2px 1px;
}

.fc-agenda-days .fc-agenda-axis {
  border-left-width: 1px;
}

.fc-agenda-days .fc-col0 {
  border-right-width: 0;
}

.fc-agenda-allday th {
  border-width: 0 1px;
}

.fc-agenda-allday .fc-day-content {
  min-height: 34px;
  _height: 34px;
}

.fc-agenda-divider-inner {
  height: 2px;
  overflow: hidden;
}

.fc-widget-header .fc-agenda-divider-inner {
  background: #eee;
}

.fc-agenda-slots th {
  border-width: 1px 1px 0;
}

.fc-agenda-slots td {
  border-width: 1px 0 0;
  background: 0 0;
}

.fc-agenda-slots td div {
  height: 20px;
}

.fc-agenda-slots tr.fc-slot0 td,
.fc-agenda-slots tr.fc-slot0 th {
  border-top-width: 0;
}

.fc-agenda-slots tr.fc-minor td,
.fc-agenda-slots tr.fc-minor th {
  border-top-style: dotted;
}

.fc-agenda-slots tr.fc-minor th.ui-widget-header {
  *border-top-style: solid;
}

.fc-event-vert {
  border-width: 0 0 0 4px;
  margin-bottom: 3px;
  border-radius: 2px;
  background-image: linear-gradient(to bottom, #fff 0, #ededed 100%);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.fc-event-vert .fc-event-content,
.fc-event-vert .fc-event-head {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
}

.fc-event-vert .fc-event-time {
  white-space: nowrap;
  font-size: 10px;
}

.fc-event-vert .fc-event-bg {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.fc .ui-draggable-dragging .fc-event-bg,
.fc-select-helper .fc-event-bg {
  display: none;
}

.fc-event-vert .ui-resizable-s {
  bottom: 0 !important;
  width: 100% !important;
  height: 8px !important;
  overflow: hidden !important;
  line-height: 8px !important;
  font-size: 11px !important;
  font-family: monospace;
  text-align: center;
  cursor: s-resize;
}

.fc-agenda .ui-resizable-resizing {
  _overflow: hidden;
}

#calendar-container {
  position: relative;
}

.fc table,
html .fc {
  font-size: 12px;
}

.dt-header.calender-spacer {
  height: 46px;
  display: block;
}

tr td.fc-first,
tr.fc-first th.fc-first {
  border-right: 0;
}

tr.fc-last td {
  border-bottom: 0;
}

.fc-header-title h2 {
  margin-top: 5px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 800 !important;
  margin-bottom: 0;
}

.fc-event-time,
.fc-event-title {
  padding: 3px 0 2px 3px;
  display: inline-block;
  line-height: 16px;
  font-weight: 700;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.fc-other-month {
  background-image: 8121991;
  background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 75%, transparent 75%, transparent);
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 75%, transparent 75%, transparent);
  background-color: #fff;
  -webkit-background-size: 20px 20px;
  -moz-background-size: 20px 20px;
  background-size: 20px 20px;
}

.fc-border-separate thead tr,
.table thead tr {
  background-color: #fafafa;
}

.fc-border-separate thead tr th {
  padding: 4px;
  line-height: 1.428571429;
}

.external-event {
  border-right: 4px solid var(--main-color);
  margin-bottom: 10px;
  border-radius: 2px;
  padding: 5px 15px 5px 5px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: -moz-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: -o-linear-gradient(top, #fff 0, #ededed 100%);
  background-image: linear-gradient(to bottom, #fff 0, #ededed 100%);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  font-size: 12px;
}

/*#region Tasks*/
.task-container {
  position: relative;
  padding: 0;
}

.task-container .task-search {
  padding: 15px 16px 15px;
  background-color: #f3f3f3;
  border-bottom: 1px solid #eee;
}

.task-container .task-search input {
  border-color: #e5e5e5 !important;
  -webkit-border-radius: 3px !important;
  -webkit-background-clip: padding-box !important;
  -moz-border-radius: 3px !important;
  -moz-background-clip: padding !important;
  border-radius: 3px !important;
  background-clip: padding-box !important;
}

.task-container .tasks-list {
  list-style: none;
  padding: 0;
}

.task-container .tasks-list .task-item {
  position: relative;
  height: 150px;
  border-bottom: 1px solid #e5e5e5;
}

.task-container .tasks-list .task-item:last-child {
  border-bottom: 0px;
}

.task-container .tasks-list .task-item:hover {
  background-color: #f5f5f5;
}

.task-container .tasks-list .task-item .task-check {
  position: absolute;
  top: 20px;
  right: 15px;
  margin-left: 5px;
}

.task-container .tasks-list .task-item .task-state {
  position: absolute;
  top: 19px;
  right: 45px;
}

.task-container .tasks-list .task-item .task-state .label {
  padding: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.task-container .tasks-list .task-item .task-time {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 11px;
  color: #999;
}

.task-container .tasks-list .task-item .task-body {
  position: absolute;
  top: 60px;
  right: 45px;
  padding-left: 25px;
  height: 40px;
  overflow: hidden;
  line-height: 22px;
}

.task-container .tasks-list .task-item .task-creator {
  position: absolute;
  top: 115px;
  right: 45px;
}

.task-container .tasks-list .task-item .task-creator a {
  font-size: 13px;
  color: #11a9cc;
}

.task-container .tasks-list .task-item .task-creator a:hover {
  text-decoration: none;
}

.task-container .tasks-list .task-item .task-assignedto {
  position: absolute;
  top: 115px;
  left: 20px;
  font-size: 13px;
  color: #999;
}

@media (max-width: 1200px) {
  .task-container .tasks-list .task-item {
    height: 130px;
  }

  .task-container .tasks-list .task-item .task-creator,
.task-container .tasks-list .task-item .task-assignedto {
    top: 95px;
  }
}
@media (max-width: 600px) {
  .task-container .tasks-list .task-item {
    height: 150px;
  }

  .task-container .tasks-list .task-item .task-creator,
.task-container .tasks-list .task-item .task-assignedto {
    top: 115px;
  }
}
@media (max-width: 335px) {
  .task-container .tasks-list .task-item {
    height: 175px;
  }

  .task-container .tasks-list .task-item .task-assignedto {
    top: 140px;
    left: auto;
    right: 45px;
  }
}
/*#region Tickets*/
.tickets-container {
  position: relative;
  padding: 25px 25px;
  background-color: #f5f5f5;
}

.tickets-container .tickets-list {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.tickets-container .tickets-list .ticket-item {
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  margin-bottom: 8px;
  padding: 0 15px;
  vertical-align: top;
}

.tickets-container .tickets-list .ticket-item:last-child {
  margin-bottom: 0;
}

.tickets-container .tickets-list .ticket-item .ticket-user {
  height: 50px;
  padding: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tickets-container .tickets-list .ticket-item .ticket-user .user-avatar {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}

.tickets-container .tickets-list .ticket-item .ticket-user .user-name {
  margin-right: 5px;
  font-size: 13px;
}

.tickets-container .tickets-list .ticket-item .ticket-user .user-at {
  margin-right: 2px;
  color: #ccc;
  font-size: 13px;
}

.tickets-container .tickets-list .ticket-item .ticket-user .user-company {
  margin-right: 2px;
  color: #999;
}

.tickets-container .tickets-list .ticket-item .ticket-time {
  line-height: 30px;
  height: 50px;
  padding: 10px;
}

.tickets-container .tickets-list .ticket-item .ticket-time i {
  color: #ccc;
}

.tickets-container .tickets-list .ticket-item .ticket-time .time {
  color: #999;
  font-size: 11px;
  text-transform: uppercase;
}

.tickets-container .tickets-list .ticket-item .ticket-type {
  line-height: 30px;
  height: 50px;
  padding: 10px;
}

.tickets-container .tickets-list .ticket-item .ticket-type .type {
  color: #999;
  font-size: 11px;
  text-transform: uppercase;
}

.tickets-container .tickets-list .ticket-item .ticket-state {
  position: absolute;
  top: 13px;
  left: -12px;
  height: 24px;
  width: 24px;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  background-color: #e5e5e5;
  text-align: center;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border: 2px solid #fff;
}

.tickets-container .tickets-list .ticket-item .ticket-state i {
  font-size: 13px;
  color: #fff;
  line-height: 20px;
}

.tickets-container .tickets-list .ticket-item .divider {
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 1px;
  background-color: #eee;
  display: inline-block;
}

@media (max-width: 1200px) {
  .tickets-container .tickets-list .ticket-item .ticket-user {
    border-bottom: 1px solid #eee;
  }
}
@media (max-width: 768px) {
  .tickets-container .tickets-list .ticket-item .ticket-time {
    border-bottom: 1px solid #eee;
  }
}
/*#region Dashboard Box*/
.dashboard-box {
  background-color: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
  position: relative;
  border-radius: 8px;
  margin: 0 !important;
  overflow: hidden;
  padding-top: 60px;
}

.dashboard-box .box-header {
  background-color: #fff;
  padding: 20px;
  position: absolute;
  top: 0;
  right: 0;
}

.dashboard-box .box-header .deadline {
  position: absolute;
  top: -3px;
  left: 20px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  padding: 5px 10px;
  border-top: 3px solid var(--main-color);
  color: #999;
  font-size: 12px;
}

.dashboard-box .box-progress {
  padding: 0;
  position: relative;
}

.dashboard-box .box-progress .progress {
  margin-bottom: 0;
}

.dashboard-box .box-progress .progress .progress-bar {
  position: relative;
}

.dashboard-box .box-progress .progress .progress-bar:after {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #a0d468;
}

.dashboard-box .box-progress .progress-handle {
  position: absolute;
  top: -31px;
  -lh-property: 0;
  right: -webkit-calc(20% - 35px);
  right: -moz-calc(20% - 35px);
  right: calc(20% - 35px);
  width: 60px;
  height: 25px;
  background-color: var(--main-color);
  padding: 2px 5px;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
}

.dashboard-box .box-progress .progress-handle:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  content: " ";
  bottom: -13px;
  right: 23px;
  border-bottom-width: 0;
  border-top-color: var(--main-color);
  border-width: 7px;
}

.dashboard-box .box-tabbs {
  /*background-color: #fbfbfb;*/
}

.dashboard-box .box-tabbs .tabbable .nav-tabs li {
  background-color: #fff;
}

.dashboard-box .box-tabbs .tabbable .nav-tabs li:first-child.active a {
  border-right: 0px;
}

.dashboard-box .box-tabbs .tabbable .nav-tabs li:last-child.active a {
  border-left: 0px;
}

.dashboard-box .box-tabbs .tabbable .nav-tabs li.active a {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  border-top: 1px solid #e5e5e5 !important;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  background-color: #fff;
}

.dashboard-box .box-tabbs .tabbable .tab-content {
  margin-top: 1px;
  background-color: #fff;
}

.dashboard-box .box-tabbs .tabbable .tab-content .databox {
  margin-bottom: 20px;
}

.dashboard-box .box-visits .row {
  margin: 0;
}

.dashboard-box .box-visits .row > div {
  padding: 0 !important;
}

.dashboard-box .box-visits .row > div:last-child .databox {
  border-left: 0;
}

.dashboard-box .box-visits .row > div .notification {
  border: 1px solid #e5e5e5;
  border-right: 0;
  border-bottom: 0;
  height: 68px;
  padding: 18px 15px;
}

.dashboard-box .box-visits .row > div .notification .notification-icon {
  float: right;
}

.dashboard-box .box-visits .row > div .notification .notification-icon i {
  width: 34px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  margin-left: 10px;
  font-size: 16px;
  border-radius: 50%;
}

.dashboard-box .box-visits .row > div .notification .notification-icon i:hover {
  cursor: pointer;
}

.dashboard-box .box-visits .row > div .notification .notification-body {
  float: right;
}

.dashboard-box .box-visits .row > div .notification .notification-body .title {
  display: block;
  font-size: 21px;
}

.dashboard-box .box-visits .row > div .notification .notification-body .description {
  display: block;
  font-size: 10px;
  color: #999;
}

.dashboard-box .box-visits .row > div .notification .notification-extra {
  float: left;
  text-align: left;
}

.dashboard-box .box-visits .row > div .notification .notification-extra i {
  font-size: 14px;
}

.dashboard-box .box-visits .row > div .notification .notification-extra .description {
  display: block;
  font-size: 10px;
  color: #999;
}

@media (max-width: 767px) {
  .dashboard-box .box-tabbs .tabbable .tab-content #visits .visits-databoxes > div:last-child .databox {
    border-bottom: 1px solid #e5e5e5;
  }

  .dashboard-box .box-tabbs .tabbable .tab-content #visits .visits-databoxes > div .databox {
    border-bottom: 0;
    border-left: 0;
  }
}
/*#region Orders*/
.orders-container {
  position: relative;
  padding: 0px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
}

.orders-container .orders-header {
  position: relative;
  height: 43px;
  padding: 14px 10px;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fbfbfb;
}

.orders-container .orders-header h6 {
  margin: 0;
}

.orders-container .orders-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.orders-container .orders-list .order-item {
  position: relative;
  padding: 7px 10px;
  vertical-align: top;
  border-bottom: 1px solid #e5e5e5;
}

.orders-container .orders-list .order-item:before {
  display: none;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -4px;
  width: 4px;
  max-width: 4px;
  overflow: hidden;
  background-color: var(--main-color);
}

.orders-container .orders-list .order-item:hover {
  background-color: #fbfbfb;
}

.orders-container .orders-list .order-item:hover:before {
  display: block;
}

.orders-container .orders-list .order-item.top:hover:before {
  background-color: #fb6e52;
}

.orders-container .orders-list .order-item.top .item-more {
  color: #fb6e52;
}

.orders-container .orders-list .order-item .item-left {
  padding-left: 0;
}

.orders-container .orders-list .order-item .item-left .item-booker {
  margin: 6px 0;
  color: #777;
}

.orders-container .orders-list .order-item .item-left .item-time {
  font-size: 11px;
  margin-bottom: 2px;
  color: #999;
}

.orders-container .orders-list .order-item .item-right {
  padding-right: 0;
  text-align: center;
}

.orders-container .orders-list .order-item .item-right .item-price {
  font-size: 13px;
  margin: 17px auto;
  color: #666;
}

.orders-container .orders-list .order-item .item-more {
  position: absolute;
  left: -10px;
  -lh-property: 0;
  top: -webkit-calc(50% - 13px);
  top: -moz-calc(50% - 13px);
  top: calc(50% - 13px);
  width: 25px;
  height: 25px;
  font-size: 14px;
  text-align: center;
  border-radius: 50%;
  background-color: #fff;
  border: 3px solid #fff;
  vertical-align: middle;
  color: var(--main-color);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.orders-container .orders-list .order-item .item-more i {
  font-size: 17px;
  display: inline-block;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.orders-container .orders-list .order-item .item-more i:before {
  content: "\f105";
}

.orders-container .orders-footer {
  position: relative;
  background-color: white;
  height: 34px;
  padding: 7px;
  text-align: center;
  background-color: #fbfbfb;
}

.orders-container .orders-footer a {
  margin: 0 auto;
  font-size: 11px;
  color: #999;
  font-weight: 500;
}

.orders-container .orders-footer a:hover {
  text-decoration: none;
}

.orders-container .orders-footer .help {
  position: absolute;
  left: 0;
  top: 0;
  width: 37px;
  height: 37px;
  border-right: 1px solid #e5e5e5;
  text-align: center;
  padding: 8px;
}

.orders-container .orders-footer .help a i {
  font-size: 18px;
  color: #ccc;
}

/*#region 404*/
.body-404 {
  background: #5f99cf !important;
  color: #fff;
}

.body-404:before {
  display: none;
}

.error-header {
  background: #fff;
  height: 280px;
}

.error-container {
  background: rgba(0, 0, 0, 0.05);
  text-align: center;
}

.error-container h1 {
  font-size: 110px;
  font-weight: 300;
  margin: -103px 0 0 0;
  text-align: center;
  color: var(--main-color);
}

.error-container h2 {
  font-size: 58px;
  font-weight: 300;
  margin: 0;
  text-transform: uppercase;
}

.error-container p,
.error-container p a {
  font-size: 18px;
  font-weight: 300;
  margin: 0;
  padding-top: 10px;
}

.error-container p.description {
  color: #3c4146;
  font-size: 40px;
  margin: 0;
}

.error-divider {
  margin-top: -27px;
  padding: 30px 0;
}

.return-btn,
.return-btn:hover {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 15px;
  margin-top: 100px;
  margin-bottom: 30px;
  display: inline-block;
  -webkit-border-radius: 5px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 5px;
  -moz-background-clip: padding;
  border-radius: 5px;
  background-clip: padding-box;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
}

.return-btn i {
  margin-left: 5px;
}

.return-btn:hover {
  background: #fff;
  color: var(--main-color);
  text-decoration: none;
}

/*#endregion 404*/
/*#region 500*/
.body-500 {
  background-color: #fb6e52;
  color: #fff;
}

.body-500:before {
  display: none;
}

.body-500 .error-container h1 {
  color: #fb6e52;
}

.body-500 .return-btn:hover {
  color: #fb6e52;
}

/*#region SearchHelpBar*/
.searchhelpbar {
  width: 100%;
  position: relative;
  margin: 0 0 10px;
}

.searchhelpbar .help-box {
  min-height: 72px;
  padding: 0;
  padding-bottom: 0;
}

.searchhelpbar .help-box .alert {
  min-height: 72px;
  border-color: #fff;
}

.searchhelpbar .search-box {
  background-color: #fff;
  min-height: 72px;
  padding: 0;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.searchhelpbar .search-box > div {
  padding: 19px;
}

/*#region Loading*/
@-webkit-keyframes typing {
  0% {
    background-color: #fff;
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  25% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px #fff, 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  75% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px #fff;
  }
}
@-moz-keyframes typing {
  0% {
    background-color: #fff;
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  25% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px #fff, 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  75% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px #fff;
  }
}
@keyframes typing {
  0% {
    background-color: #fff;
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  25% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px #fff, 24px 0px 0px 0px rgba(255, 255, 255, 0.2);
  }
  75% {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2), 24px 0px 0px 0px #fff;
  }
}
.loading-container {
  z-index: 2000;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: var(--main-color);
}

.loading-container.loading-inactive {
  display: none;
}

.loading-container.loading-inactive .loader {
  display: none;
}

.loading-container .loader {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  -webkit-animation: typing 1s linear infinite alternate;
  -moz-animation: Typing 1s linear infinite alternate;
  animation: typing 1s linear infinite alternate;
  margin: 50vh auto;
  /* Not necessary- its only for layouting*/
  position: relative;
  right: -12px;
}

.loading-container-custom {
  z-index: 222222;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, #5b86e5 0%, var(--main-color) 100%);
}

.loading-container-custom.loading-inactive {
  display: none;
}

.loading-container-custom.loading-inactive .loader {
  display: none;
}

.loading-container-custom .loader {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  -webkit-animation: typing 1s linear infinite alternate;
  -moz-animation: Typing 1s linear infinite alternate;
  animation: typing 1s linear infinite alternate;
  margin: 50vh auto;
  /* Not necessary- its only for layouting*/
  position: relative;
  right: -12px;
}

#chat-link.open {
  -webkit-box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.4);
}

#chat-link.open:before {
  content: "";
  display: inline-block;
  left: 0;
  position: absolute;
  width: 50px;
  background-color: #fff;
  border: 0;
  top: 0;
  height: 2px;
}

.page-chatbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999;
  display: none;
}
.page-chatbar .page-chatbar-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
}
.page-chatbar .page-chatbar-content {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 400px;
  max-width: calc(100% - 60px);
  left: -400px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
  -lh-property: 0;
  height: 100%;
  background: #fbfbfb;
  border: 1px solid #ddd;
  padding: 15px;
  animation: forwards 0.3s ease-in-out openSchoolTreeAnimation;
}

@keyframes openSchoolTreeAnimation {
  from {
    left: -400px;
  }
  to {
    left: 0;
  }
}
.page-chatbar.open {
  display: block;
}

.page-chatbar:before {
  content: "";
  position: fixed;
  display: none;
  width: 287px;
  bottom: 0;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: -1;
}

.page-chatbar .chatbar-contacts {
  height: calc(100% - 100px);
  overflow: scroll;
}

.page-chatbar .chatbar-contacts .contacts-search {
  position: relative;
  height: 41px;
}

.page-chatbar .chatbar-contacts .contacts-search .searchinput {
  height: 41px;
  z-index: 2;
  background-color: #fff;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid #fff;
  border-bottom: 1px solid #e5e5e5;
  padding-right: 40px;
  width: 100%;
}

.page-chatbar .chatbar-contacts .contacts-search .searchinput:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #fff;
}

.page-chatbar .chatbar-contacts .contacts-search .searchinput:focus ~ .searchhelper {
  display: block;
  z-index: 124;
}

.page-chatbar .chatbar-contacts .contacts-search .searchinput::-webkit-input-placeholder {
  color: #d0d0d0;
  font-weight: 300;
  font-family: "Open Sans", "Segoe UI";
}

.page-chatbar .chatbar-contacts .contacts-search .searchinput::-moz-placeholder {
  /* Firefox 19+ */
  color: #d0d0d0;
  font-weight: 300;
  font-family: "Open Sans", "Segoe UI";
}

.page-chatbar .chatbar-contacts .contacts-search .searchinput:-moz-placeholder {
  /* Firefox 19+ */
  color: #d0d0d0;
  font-weight: 300;
  font-family: "Open Sans", "Segoe UI";
}

.page-chatbar .chatbar-contacts .contacts-search .searchinput:-ms-input-placeholder {
  color: #d0d0d0;
  font-weight: 300;
  font-family: "Open Sans", "Segoe UI";
}

.page-chatbar .chatbar-contacts .contacts-search .searchicon {
  cursor: pointer;
  display: inline-block;
  height: 12px;
  right: 20px;
  position: absolute;
  top: 14px;
  width: 12px;
  color: var(--main-color);
  z-index: 124;
}

.page-chatbar .chatbar-contacts .contacts-search .searchhelper {
  -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  background-color: #fff;
  color: #999;
  display: none;
  opacity: 1;
  padding: 10px;
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  z-index: 4;
}

.float_revert {
  float: left;
}

.page-chatbar .chatbar-contacts .contacts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

.page-chatbar .chatbar-contacts .contacts-list .contact {
  height: 85px;
  padding: 10px;
  position: relative;
}

.page-chatbar .chatbar-contacts .contacts-list .contact:hover {
  background-color: #f3f3f3;
  cursor: pointer;
}

.page-chatbar .chatbar-contacts .contacts-list .contact .contact-avatar {
  display: inline-block;
  width: 65px;
  height: 65px;
}

.page-chatbar .chatbar-contacts .contacts-list .contact .contact-avatar img {
  width: 65px;
  height: 65px;
}

.page-chatbar .chatbar-contacts .contacts-list .contact .contact-info {
  display: inline-block;
  vertical-align: bottom;
  padding-right: 5px;
}

.page-chatbar .chatbar-contacts .contacts-list .contact .contact-info .contact-name {
  font-size: 1em;
  padding-bottom: 2px;
}

.page-chatbar .chatbar-contacts .contacts-list .contact .contact-info .contact-status {
  font-size: 0.8em;
  margin-bottom: 2px;
}

.page-chatbar .chatbar-contacts .contacts-list .contact .contact-info .contact-status .online,
.page-chatbar .chatbar-contacts .contacts-list .contact .contact-info .contact-status .offline {
  display: inline-block;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.page-chatbar .chatbar-contacts .contacts-list .contact .contact-info .contact-status .online {
  background-color: #a0d468;
}

.page-chatbar .chatbar-contacts .contacts-list .contact .contact-info .contact-status .offline {
  background-color: #d73d32;
}

.page-chatbar .chatbar-contacts .contacts-list .contact .contact-info .contact-status .status {
  display: inline-block;
  margin-right: 4px;
}

.page-chatbar .chatbar-contacts .contacts-list .contact .last-chat-time {
  position: absolute;
  left: 20px;
  bottom: 12px;
  font-size: 0.8em;
}

.page-chatbar .chatbar-messages {
  height: 100%;
}

.page-chatbar .chatbar-messages .messages-contact {
  height: 85px;
  padding: 10px;
  position: relative;
  background-color: #f3f3f3;
  border-bottom: 1px solid #e5e5e5;
}

.page-chatbar .chatbar-messages .messages-contact .contact-avatar {
  display: inline-block;
  width: 65px;
  height: 65px;
}

.page-chatbar .chatbar-messages .messages-contact .contact-avatar img {
  width: 65px;
  height: 65px;
}

.page-chatbar .chatbar-messages .messages-contact .contact-info {
  display: inline-block;
  vertical-align: bottom;
  padding-right: 5px;
}

.page-chatbar .chatbar-messages .messages-contact .contact-info .contact-name {
  font-size: 1em;
  padding-bottom: 2px;
}

.page-chatbar .chatbar-messages .messages-contact .contact-info .contact-status {
  font-size: 0.8em;
  margin-bottom: 2px;
}

.page-chatbar .chatbar-messages .messages-contact .contact-info .contact-status .online,
.page-chatbar .chatbar-messages .messages-contact .contact-info .contact-status .offline {
  display: inline-block;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.page-chatbar .chatbar-messages .messages-contact .contact-info .contact-status .online {
  background-color: #a0d468;
}

.page-chatbar .chatbar-messages .messages-contact .contact-info .contact-status .offline {
  background-color: #d73d32;
}

.page-chatbar .chatbar-messages .messages-contact .contact-info .contact-status .status {
  display: inline-block;
  margin-right: 4px;
}

.page-chatbar .chatbar-messages .messages-contact .last-chat-time {
  position: absolute;
  left: 20px;
  bottom: 12px;
  font-size: 0.8em;
}

.page-chatbar .chatbar-messages .messages-contact .back {
  position: absolute;
  top: 14px;
  left: 14px;
}

.page-chatbar .chatbar-messages .messages-contact .back:hover {
  cursor: pointer;
}

.page-chatbar .chatbar-messages .messages-contact .back i {
  font-size: 22px;
  color: var(--main-color);
}

.page-chatbar .chatbar-messages .messages-list {
  list-style: none;
  padding: 10px 0;
  overflow: auto;
}

.page-chatbar .chatbar-messages .messages-list .message {
  padding: 10px 15px;
}

.page-chatbar .chatbar-messages .messages-list .message .message-info {
  height: 18px;
}

.page-chatbar .chatbar-messages .messages-list .message .message-info .bullet,
.page-chatbar .chatbar-messages .messages-list .message .message-info .contact-name,
.page-chatbar .chatbar-messages .messages-list .message .message-info .message-time {
  display: inline-block;
}

.page-chatbar .chatbar-messages .messages-list .message .message-info .bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #a0d468;
  margin-left: 5px;
}

.page-chatbar .chatbar-messages .messages-list .message .message-info .contact-name {
  font-weight: bold;
  margin-left: 5px;
}

.page-chatbar .chatbar-messages .messages-list .message .message-info .message-time {
  font-size: 0.8em;
  color: #666;
}

.page-chatbar .chatbar-messages .messages-list .message .message-body {
  margin-top: 10px;
  border-radius: 3px;
  background-color: #a0d468;
  color: #fff;
  padding: 10px;
  position: relative;
  margin-left: 10%;
}

.page-chatbar .chatbar-messages .messages-list .message .message-body:before {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  top: -14px;
  right: 10px;
  border-top-width: 0;
  border-bottom-color: #a0d468;
  border-width: 7px;
}

.page-chatbar .chatbar-messages .messages-list .message.reply .message-info .bullet,
.page-chatbar .chatbar-messages .messages-list .message.reply .message-info .contact-name,
.page-chatbar .chatbar-messages .messages-list .message.reply .message-info .message-time {
  float: left;
  margin-left: 0;
  margin-right: 10px;
}

.page-chatbar .chatbar-messages .messages-list .message.reply .message-info .bullet {
  background-color: #5db2ff;
  margin-top: 8px;
}

.page-chatbar .chatbar-messages .messages-list .message.reply .message-info .message-time {
  margin-top: 2px;
}

.page-chatbar .chatbar-messages .messages-list .message.reply .message-body {
  background-color: #5db2ff;
  margin-right: 10%;
  margin-left: 0;
}

.page-chatbar .chatbar-messages .messages-list .message.reply .message-body:before {
  border-bottom-color: #5db2ff;
  left: 10px;
  right: auto;
}

.page-chatbar .chatbar-messages .send-message {
  padding: 15px;
  background-color: #f3f3f3;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 120px;
  border-top: 1px solid #e5e5e5;
}

/*# sourceMappingURL=beyond.css.map */
.main_container {
  padding: 2em;
  padding-top: 2em;
  margin: auto;
  position: absolute;
  width: 100%;
  left: 50%;
  max-width: 420px;
  top: 50%;
  padding-bottom: 2em;
  border-radius: 15px;
  background-color: rgba(8, 99, 194, 0.8);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
}

.classera_login_logo {
  max-width: 280px;
  width: 90%;
}

#login_wrapper input[type=text],
#login_wrapper input[type=password] {
  /* Size and position */
  /* Styles */
  border: 1px solid #2672ec;
  /* Remove the default border */
  background: white;
  /* Fallback */
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  /* Font styles */
  font-family: "Roboto", Arial, sans-serif;
  text-indent: 10px;
  color: #444;
  font-size: 14px;
  border-radius: 5px;
}

.flip_float {
  float: left;
}

.float_inverse {
  float: left !important;
}

.error-message {
  color: red;
  margin-top: 15px;
}

table.classic tbody tr * {
  background-color: #fff !important;
}

.title_cover {
  font-size: 23px;
  color: #fff;
  position: relative;
  margin: auto;
  text-align: center;
}

.log-gm {
  padding-top: 20px;
  line-height: 67px;
  border-top: 1px solid #fff;
}

.btn-google {
  margin-bottom: 15px;
  max-width: 550px;
}

.btn-microsof {
  margin-top: 17px;
}

.input-log-border {
  float: none;
}

.login_logo {
  margin-bottom: 20px;
}

.copyright {
  position: absolute;
  bottom: -50px;
  right: 0;
  color: #347eca;
}

.title_digital_cover {
  margin-top: -20px;
  color: #fff;
  font-size: 26px;
}

.title_training_cover {
  margin-top: -20px;
  color: #4993de;
  font-size: 26px;
}

@media screen and (max-width: 1199px) {
  .input-log-border {
    border-left: none;
  }
}
.btn-login {
  font-size: 1.5em;
  text-transform: uppercase;
  line-height: 36px;
  height: 45px;
  box-sizing: border-box;
  background-color: #174777 !important;
  border: 0;
  color: #fff;
  max-width: 95%;
  margin: 10px 0 20px;
}

.btn-login:hover {
  background: #1c5690 !important;
  color: #fff;
}

.btn-login:focus {
  background: #1c5690 !important;
  color: #fff;
}

.btn-login:visited {
  background: #174777 !important;
  color: #fff;
}

.form-lan-pass {
  margin-top: 5%;
}

.btn-forgot {
  color: #fff !important;
  display: inline-block !important;
  white-space: nowrap;
  margin-top: 5px;
}

.btn-forgot:hover {
  color: #eee !important;
}

.btn-lang:hover {
  color: blue;
}

#login_wrapper .dropdown-toggle {
  width: 100px;
}

#login_wrapper .success_flash {
  color: #fff;
}

@media screen and (max-width: 1199px) {
  .btn-login {
    margin-right: 0;
    float: none;
  }

  .form-lan-pass {
    float: none;
  }
}
@media screen and (max-width: 600px) {
  .btn-login {
    max-width: 140px;
    float: none;
  }
}
.btn-micro-google {
  text-align: center !important;
  padding: 9px 50px !important;
  max-width: 550px;
}

@media screen and (max-width: 645px) {
  .btn-micro-google {
    padding-right: 80px;
  }
}
@media screen and (max-width: 736px) {
  .main_container {
    top: 0;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    border-radius: 0;
    width: 100%;
  }
}
#login_wrapper #flashMessage {
  background: white;
  border-radius: 3px;
  max-width: 83%;
  margin: auto;
  padding: 5px;
}

.ui-jqgrid .loading {
  position: relative;
  top: 73px !important;
  padding-right: 50%;
}

.img_error_page img {
  width: 47%;
  margin-top: 3%;
  height: 240px;
}

.img_error_page {
  width: 100%;
  height: auto;
}

.title_error_page {
  font-size: 34px !important;
  margin-top: 3%;
  margin-bottom: 5%;
  width: 100%;
  color: #b3b3b3;
}

p.error_page_details {
  color: #6d6d6d;
  font-size: 16px;
}

.not_found_404 {
  font-size: 171px !important;
  margin: -4% !important;
}

.internal-error {
  margin-bottom: 3%;
  color: #e4e4e4;
  font-size: 25px;
}

#login_wrapper div#authMessage {
  background: white;
  border-radius: 3px;
  max-width: 83%;
  margin: auto;
  padding: 5px;
}

ul li input[type=checkbox] {
  position: relative;
  margin: 0px 3px 0px 8px;
}

p.success_partner_title:before {
  content: "*";
  width: 0;
  height: 0;
  font-size: 22px;
  position: absolute;
  right: 0;
  margin-top: 5px;
}

.lecturs_alt .info-box.alert {
  padding: 19px 15px;
  color: #fefefe;
  position: relative;
  font: 14px/20px Museo300Regular, Arial, sans-serif;
  width: 100%;
  box-shadow: 0 0 1px 0.5px gray;
  border-radius: 5px;
  background: #519ce2;
}

.lecturs_alt .alert .msg {
  padding: 0 20px 0;
  padding-right: 40px;
  display: inline-block;
}

.lecturs_alt .info-box.alert p {
  margin: 0;
}

.lecturs_alt .info-box.alert .toggle-alert {
  position: absolute;
  top: 7px;
  left: 10px;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0px 1px 1px 0.1px #6f6d6d;
  background: rgba(0, 0, 0, 0.08) url(http://www.iconsdb.com/icons/download/white/x-mark-16.png) no-repeat 4px 4px;
}

.lecturs_alt .info-box img {
  display: inline-block;
}

.databox-text-books {
  text-align: right;
}

@media print {
  #certificate_continer {
    -webkit-print-color-adjust: exact;
  }
}
#ListStudentsForSchool .checkbox label, #ListStudentsForSchool label {
  padding-right: 22px !important;
}

.studentList .widget-header {
  position: relative;
}

.studentList .toggleSchoolListIcon {
  position: absolute;
  left: 10px;
  top: 5px;
  font-size: 23px;
  color: #5a9ce4;
  font-weight: bold;
  transition: all ease-in-out 0.5s;
}

.studentList .widget-body {
  width: 100% !important;
}

.studentList .toggleSchoolListIcon:hover {
  color: #3379b7;
}

.TicketInfo .form-control, select {
  background-color: #fff;
}

.TicketInfo .inline_block {
  width: 50%;
  float: left;
}

#quickLinks {
  display: none;
}

#quickLinks label i {
  left: 10px;
}

#quickLinks input {
  padding: 0 10px 0 45px;
}

#attachment-flag-report {
  left: 7px;
  color: var(--main-color);
}

.factorsTable td {
  position: relative;
}

td a.del-fact {
  position: absolute;
  left: 20px;
  top: 5px;
  font-size: 19px;
  color: var(--main-color);
  text-decoration: none;
}

td a.ed-fact {
  position: absolute;
  left: 40px;
  top: 5px;
  font-size: 19px;
  color: rgba(var(--main-color-rgb), 90%);
  text-decoration: none;
}

.accreditations.convertToPdf .obj_details dt {
  float: right !important;
}

#report_table th.header .arrows {
  right: 0;
}

#report_table th.header {
  padding-right: 25px;
}

.tabs-left .rateBox {
  text-align: left;
  margin-top: 5px;
}

#lastMessages {
  display: none;
}

#searchModal {
  display: none;
}

.microphoneFab {
  display: none;
}

.soundgraph {
  display: none;
}

.recognizer {
  display: none;
}

.ttcommandsWrapper .ttTitle {
  text-align: right;
}

.textToSpeechcommands {
  display: none;
}

.report_content {
  left: 20px;
}

@media (max-width: 767px) {
  .inbox_view_wrapper {
    position: relative;
  }

  .actions {
    padding-left: 40px;
  }

  .messages.view {
    position: static !important;
  }

  .btn-group.report_content {
    right: auto;
    left: 0;
  }
}
.fullScheduleTitle .btn {
  margin-right: 15px;
  min-width: 140px;
  padding: 7px;
}

.diseasesList, .clinicsList, .inoculationsList, .clinicSchools, .medicationList {
  float: right;
  width: calc(100% - 200px);
}

a.call {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 50px;
  color: var(--main-color);
  text-decoration: none;
}

.wrapperUserDriverContent i {
  margin: 0 14px;
  font-size: 16px;
  color: var(--main-color);
  position: absolute;
  right: 0;
}

.booksListPage .front img {
  margin-right: 8%;
}

form .checkbox input[type=checkbox], form input[type=radio] {
  margin-left: 0;
  margin-right: 0;
  vertical-align: bottom;
}

form input[type=radio] {
  vertical-align: text-top;
}

.page-body .timepickerSelect .select-styled {
  padding-left: 30px;
}

.courseCriteriaContent .cr_title {
  float: right !important;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 86%;
  text-align: right;
  color: #fff !important;
}

.courseCriteriaContent .cr_title input {
  position: relative;
}

.btn-default[disabled]:hover {
  color: #777;
}

.accordionMedical {
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-left: 2px solid var(--main-color);
}

.accordionMedical:after {
  content: "+";
  color: var(--main-color);
  font-weight: bold;
  float: right;
  margin-right: 5px;
}

.profile-container .profile-body .nav-tabs a {
  padding-top: 16px;
}

.navbar .login-area section h2 span i {
  margin: 0 10px;
}

.paymentModal input[value=sadad] {
  right: 0;
}

#chatServiceWrapper .usersListSections ul {
  height: calc(100% - 75px);
  overflow-y: auto;
}

.profile-container .profile-header .profile-info .header-fullname h3 {
  font-size: 1.5em;
}

.profile-container .profile-header .profile-info .header-information h4 {
  font-size: 1.2em !important;
}

.tab-content .tab-pane .well .well__item__bottom .rateBox {
  text-align: center;
}

.detailsTicket .comment-text .btn {
  float: left;
  margin: 5px;
}

@media only screen and (max-width: 767px) {
  .detailsTicket .comment-text .btn {
    margin-right: 9px;
    padding: 3px 9px;
    float: none;
  }
}
/*Activities*/
section.activities {
  color: #555;
  background-color: #f3f3f3;
  padding: 20px;
  margin-bottom: 70px;
  width: 100%;
  box-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.25);
  font-size: 16px;
}

section.activities label {
  font-weight: bold;
  vertical-align: baseline;
  margin-left: 5px;
  font-size: 16px;
}

section.activities .form-group {
  padding-bottom: 0;
}

section.activities .activities__card {
  background-color: #ddd;
  padding: 20px;
  margin-bottom: 70px;
}

section.activities .activities__card:after {
  content: "";
  display: block;
  clear: both;
}

section.activities .activities__card .activities__card--left {
  width: 30%;
  float: right;
}

section.activities .activities__card .activities__card--left .activities__card--left__image img {
  position: relative;
  bottom: 50px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

section.activities .activities__card .activities__card--right {
  width: 70%;
  float: right;
  padding-right: 30px;
}

section.activities .activities__card .activities__card--right .activities__card--right__title h1 {
  font-weight: bold !important;
  margin-bottom: 30px;
  margin-top: 10px;
}

@media (max-width: 767px) {
  section.activities .activities__card .activities__card--left,
section.activities .activities__card .activities__card--right {
    width: 100%;
    float: none;
  }
}
/*Events Style*/
section.area {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  margin-bottom: 30px;
  background-color: white;
}

section.area:nth-child(odd) {
  border-top: 4px solid #36cfdc;
}

section.area:nth-child(even) {
  border-top: 4px solid rgba(2, 116, 222, 0.65);
}

section.area .area__heading {
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

section.area .area__heading h1.heading__title,
section.area .area__heading h2.heading__title {
  margin: 0;
  position: relative;
}

section.area .area__heading h1.heading__title:after,
section.area .area__heading h2.heading__title:after {
  content: "\f0d8";
  display: block;
  font: normal normal normal 18px/1 FontAwesome;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

section.area.area--closed .area__heading h1.heading__title:after,
section.area.area--closed .area__heading h2.heading__title:after {
  content: "\f0d7";
}

section.area .area__body {
  padding: 0 15px;
}

div.area:after, div.area:before {
  content: "";
  display: table;
  clear: both;
}

section.area .area__body .area__event {
  border: 1px solid #eee;
  padding: 15px;
  text-align: center;
  border-top: 4px solid #8cc474;
}

section.area .area__body .area__event .event__bottom__wrapper {
  border-top: 1px solid #e5e5e5;
  margin: 0 -15px -15px;
  padding: 15px;
  position: relative;
  font-size: 14px;
  text-align: right;
}

section.area .area__body .area__event .event__bottom__wrapper label {
  min-width: 40px;
  font-size: 14px;
}

.chatbar-contacts {
  background: #fbfbfb;
}

.alternative_teacher_modal .modal-content {
  max-width: 100% !important;
}
.alternative_teacher_modal .modal-content .info-box img {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

* {
  padding: 0;
  margin: 0;
  outline: 0 !important;
}

[class*=col-] {
  padding: 10px 10px;
}

.small_text {
  color: #ccc;
  font-size: 11px;
}

.dataTables_processing {
  z-index: 10;
}

.c-warning {
  color: #D62;
}

.overflow-scrol-x {
  overflow-x: scroll !important;
}

.moe_support_icon {
  color: #FF6D00 !important;
}

.title_error_page {
  font-size: 34px !important;
  margin-top: 3%;
  margin-bottom: 5%;
  width: 100%;
  color: #656363;
}

.c-cayan {
  color: #337ab7;
}

.group_border {
  border-right: 2px solid #5db2ff;
  border-left: 2px solid #5db2ff;
}

.padding-2 {
  padding: 2px;
}

.school_border {
  border-right: 2px solid #a0d468;
  border-left: 2px solid #a0d468;
}

.blue_text {
  color: #4993de;
}

#switch_elements {
  padding: 8px 9px 14px 9px;
}

.question_icon_container {
  text-align: center;
  width: 115px;
  margin: auto;
  padding-top: 30px;
}

.question_icon_correct {
  font-size: 99px;
  color: #a0d468 !important;
}

.question_icon_incorrect {
  font-size: 99px;
  color: #fb6e52 !important;
}

.question_div_overlay {
  overflow: hidden;
  z-index: 2;
  position: relative;
  width: 100%;
  opacity: 0.2;
  -moz-opacity: 20%;
  -webkit-opacity: 20%;
}

.no_list_style {
  list-style: none;
}

h2 {
  margin-right: 10px !important;
}

.blue-text {
  color: #444;
}

.ktvText label {
  padding: 0 20px;
}

.replay_toggle {
  cursor: pointer;
}

.replay_body {
  padding: 0 10px;
}

.form-control-selector {
  width: auto;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.inner_table {
  padding: 0 10px;
}

span.profile {
  color: #fff;
}

.DeleteUsers {
  cursor: pointer;
}

.h4,
h4 {
  font-size: 14px !important;
}

fieldset legend {
  padding: 10px;
  padding-bottom: 10px;
  border: 0;
  text-transform: uppercase;
  font-weight: 300;
}

/*************** OLD CSS **********************/
.internal_text_block {
  text-align: justify !important;
  color: #444;
  padding: 10px;
}

.page-content .page-body .box .inner {
  position: relative;
  display: block;
  margin: 0;
  /*overflow: hidden;*/
}

.page-content .page-body .box .button_text {
  display: block;
  margin: 0 auto;
}

.page-content .page-body .box .largeIcon {
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
}

.page-content .page-body .facade {
  position: absolute;
  top: 0;
  left: 0;
  height: 211px;
  cursor: pointer;
  z-index: 10;
}

.page-content .page-body .facade_text {
  font-size: 15px;
  font-weight: normal;
  color: #444;
  text-align: center;
}

.page-content .page-body #official_check {
  width: 212px;
  padding-bottom: 5px;
}

.panel_title {
  color: #4993de;
}

.panel_sub_title {
  color: #1B9AAA;
}

.dd-handle,
.dd2-content {
  color: #444;
}

.dd2-handle + .dd2-content,
.dd2-handle + .dd2-content[class*=btn-] {
  padding-right: 200px;
}

.dd2-handle,
.dd-dragel > li > .dd2-handle {
  right: 0;
  top: 0;
  width: 166px;
}

.prepration_tasks_boxes {
  border: 1px #ddd solid;
  border-radius: 1px;
  background-color: #fff;
}

.prepration_tasks_boxes .panel {
  background-color: #fff;
}

.loading_gif {
  width: 30px;
  margin: auto;
  padding: 20px 0;
}

.size_s {
  width: 20%;
}

.size_m {
  width: 30%;
}

.evaluator_users_container {
  height: 350px;
  overflow-y: scroll;
  padding: 20px;
}

.checkbox_margin {
  margin-top: -10px;
}

.classera_block.size_m {
  height: 270px;
}

.classera_block.size_l {
  height: 300px;
}

.vertical * {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.icon_with_title .title {
  margin-right: 0.3em;
  vertical-align: middle;
  position: relative;
}

.size_s .circular_icon {
  width: 75px;
  height: 75px;
  font-size: 2.5em;
  line-height: 75px;
}

.size_m .circular_icon {
  width: 100px;
  height: 100px;
  font-size: 3.5em;
  line-height: 100px;
}

.size_l .circular_icon {
  width: 120px;
  height: 120px;
  font-size: 4em;
  line-height: 120px;
}

.size_s .title {
  font-size: 1em;
  vertical-align: middle;
}

.size_s .sub_title {
  font-size: 0.6em;
  vertical-align: middle;
  float: right;
}

.size_m .title {
  font-size: 1.3em;
  vertical-align: middle;
}

.size_m .sub_title {
  font-size: 0.8em;
  vertical-align: middle;
  float: right;
}

.size_l .title {
  font-size: 1.3em;
  vertical-align: middle;
}

.size_l .sub_title {
  font-size: 0.8em;
  vertical-align: middle;
  float: right;
}

.web_font {
  font-family: picto-foundry-general, picto-foundry-multimedia, picto-foundry-shopping-finance !important;
}

.circular_icon {
  border-radius: 50%;
  color: #fff;
  vertical-align: middle;
  font-family: picto-foundry-general !important;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  background: var(--main-color);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#34b8ed", endColorstr="#0892c9", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  display: flex;
  align-items: center;
  justify-content: center;
}

.browse-library-button {
  display: block;
  height: 50px;
  width: 98%;
  margin: 0 auto;
  vertical-align: middle;
  padding-top: 15px;
  font-size: 18px;
}

.main_container {
  padding: 2em;
  padding-top: 2em;
  padding-bottom: 2em;
  border-radius: 1.5em;
  background-color: rgba(255, 255, 255, 0.2);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0.2)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=.2, startColorstr=rgba(255, 255, 255, .8), endColorstr=rgba(255, 255, 255, .2));
  /*Dark Option
  background-color: rgba(0,0,0,.1); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.8)), to(rgba(0,0,0,.2)));
  */
}

.classera_login_logo {
  max-width: 280px;
  width: 90%;
}

#login_wrapper input[type=text],
#login_wrapper input[type=password] {
  /* Size and position */
  /* Styles */
  border: none;
  /* Remove the default border */
  background: white;
  /* Fallback */
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  /* Font styles */
  font-family: "Noto Kufi Arabic", "Roboto", open sans, sans-serif !important;
  text-indent: 10px;
  color: #444;
  font-size: 14px;
  border-radius: 5px;
}

/*box grids*/
.boxgrid {
  background-color: #fff;
}

.boxgrid a {
  text-decoration: none;
  font-size: 12px;
  padding: 4px;
  color: #4993de;
}

.boxgrid a:hover {
  text-decoration: none !important;
}

.boxgrid p {
  padding: 0 10px;
  color: #fff;
  font-weight: normal;
  font-size: 11px;
  line-height: 20px;
  text-align: justify;
}

.boxgrid ul {
  padding: 0 10px 0 0;
}

.boxgrid ul li {
  list-style: none !important;
  cursor: pointer;
}

.boxgrid h2 {
  margin: 10px 45px 0 10px;
  font-size: 15px;
  font-weight: bold;
}

.boxgrid .cover h3 {
  margin: 15px 5px 0 5px;
  font-size: 17px;
  font-weight: normal;
}

.boxgrid .cover {
  background: #fff;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  border: 0;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.boxgrid .cover img {
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 20px;
  border-radius: 50%;
  padding: 15px;
  background-color: #fff;
  height: 120px;
  width: 120px;
  object-fit: contain;
  -o-object-fit: contain;
}

.boxgrid .cover .course-level {
  display: block;
  font-size: 11px;
  color: #ffffff;
}

/************************ Grid_autosearch **********************/
.grid__autosearch {
  padding: 20px;
}

.grid__autosearch input {
  min-height: 38px;
}

.export_icons {
  padding: 10px;
}

span.autosearch_label {
  font-size: 11px !important;
}

/************************ Actions List *************************/
.actions {
  display: inline-block;
}

.actions:after {
  content: ".";
  display: block;
  height: 10px;
  clear: both;
  visibility: hidden;
}

.actions ul {
  list-style: none;
}

.actions > ul > li {
  float: right;
  margin: 5px 5px;
}

.actions ul li a:not(.questionTypedropDownList) {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
  position: relative;
  display: inline-block;
  color: #fff;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  -o-transition: all 0.15s ease;
  transition: all 0.15s ease;
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
  font-size: 13px;
  padding: 0 10px;
  background-color: #fff;
  border-color: #ccc;
  text-decoration: none;
  border-radius: 25px;
}

.actions ul li a:hover,
.actions ul li a.active {
  background-color: rgba(var(--main-color-rgb), 90%) !important;
  border-color: rgba(var(--main-color-rgb), 90%);
  color: #fff;
  background-color: #fff;
  border-color: #ccc;
}

.actions h3 {
  display: none;
}

ul.paging {
  list-style: none;
  z-index: 0;
  height: 21px;
  max-height: 21px;
  overflow: visible;
  padding-top: 0px;
  text-align: center;
  font-size: 11px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

ul.paging li {
  display: inline-block;
  width: 15px;
  height: 15px;
}
@media screen and (min-width: 1480px) {
  ul.paging li {
    width: 17px;
    height: 17px;
  }
}
@media screen and (max-width: 950px) {
  ul.paging li {
    width: 14px;
    height: 14px;
  }
}

ul.paging a {
  cursor: pointer;
  margin: 0 1px 0 0;
  font-weight: normal;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  padding: 3px 7px 5px 7px;
}

ul.paging a:hover {
  background-color: #b7b7b7;
}

.no_new_notifications_notice {
  margin-top: 30px;
  display: block;
  position: absolute;
  top: 25px;
  text-align: center;
  width: 100%;
}

/************************ Animations ***************************/
@-webkit-keyframes spinAround {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spinAround {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes toTopFromBottom {
  49% {
    -webkit-transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
@-moz-keyframes toTopFromBottom {
  49% {
    -moz-transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes toTopFromBottom {
  49% {
    transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
@-webkit-keyframes sonarEffect {
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    -webkit-transform: scale(1.5);
    opacity: 0;
  }
}
@-moz-keyframes sonarEffect {
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    -moz-transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes sonarEffect {
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    transform: scale(1.5);
    opacity: 0;
  }
}
/*************** END OLD CSS *****************/
textarea {
  padding: 10px !important;
}

fieldset {
  border: 0;
  color: #444;
  position: relative;
  margin-bottom: 30px;
  min-height: 0;
  padding: 10px 20px;
}

.page-body form {
  border-radius: 5px;
  width: 67%;
  margin: 10px auto;
  min-width: 495px;
  box-shadow: none;
  background: #f3f3f3;
  padding: 5px 10px;
  position: relative;
  border-radius: 27px;
  padding-bottom: 30px;
  padding-top: 10px;
}
@media (max-width: 600px) {
  .page-body form {
    min-width: 300px;
    width: 100%;
  }
}
@media screen and (max-width: 1550px) {
  .page-body form {
    width: 75%;
  }
}
.page-body form.full_width {
  width: 100%;
}

#cash_recharge_report_form,
#transfer_balance_report_form,
#admin_report_form {
  min-width: auto;
}

.page-body form:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: #f3f3f3;
  z-index: 11111;
  border-radius: 26px;
}

.page-body form.finshedLoad:before {
  background: transparent;
  z-index: -2;
}

.page-body form input[type=submit], .page-body form button {
  background: var(--main-color);
  border: 0;
  padding: 10px 20px;
  color: #fff;
  transition: all ease-in-out 0.4s;
  -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
  margin: 10px;
  border-radius: 25px;
}

form input[type=submit]:hover, form button:hover {
  background: rgba(var(--main-color-rgb), 90%);
  color: #fff;
  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.4);
}

.well fieldset {
  box-shadow: none !important;
}

legend {
  position: relative !important;
  margin-bottom: 40px !important;
  top: 40px;
  font-size: 2em;
  color: #444;
  border-color: #d5d5d5;
}

#login_wrapper input[type=text],
#login_wrapper input[type=password] {
  width: 100% !important;
}

.ui-jqgrid .ui-jqgrid-bdiv {
  height: auto !important;
  min-height: 150px !important;
  max-height: 600px !important;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid #eeeeef;
  position: relative;
}

.ui-jqgrid-btable tr td,
.dataTable tr th {
  text-align: center !important;
  word-wrap: break-word;
}

.ui-jqgrid-btable,
.dataTable {
  table-layout: fixed !important;
}

.ui-jqgrid-btable .jqgfirstrow td {
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.inbox_view_wrapper {
  background-color: #fafafa;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  padding: 10px;
}

.inbox_view_wrapper .sent_date {
  color: gray;
  font-size: 13px;
  margin: 10px;
  margin-left: 20px;
}

.inbox_view_wrapper .message_body {
  margin: 30px 20px;
  border: 1px #eee solid;
  padding: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.inbox_view_wrapper .attachments {
  border: 1px var(--main-color) solid;
  padding: 20px;
  margin: 20px;
}

#show_room_details {
  padding: 10px 0;
}

.post_display {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 1px var(--main-color) solid;
  color: #444;
  margin: 20px 20px;
}

.post_display .author_photo,
.inbox_view_wrapper .sender_photo {
  float: right;
  margin: 5px 20px;
  border: 2px silver solid;
  padding: 2px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  height: 70px;
  width: 70px;
}

.post_display .post_title,
.post_display .post_author,
.inbox_view_wrapper .sender {
  font-size: 15px;
  color: var(--main-color);
  padding-right: 90px;
  margin-top: 0px;
}

.post_display .post_body {
  padding-right: 120px;
}

.post_display .reply_button {
  width: 100px;
  height: 35px;
  background-color: var(--main-color);
  position: relative;
  right: 80%;
  top: -20px;
  padding: 10px 0 0 0px;
  border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}

.post_display .reply_button a {
  color: black;
  width: 100px;
  height: 20px;
  display: block;
}

.post_display .reply_button:hover {
  background-color: silver;
}

.post_display .post_date {
  font-size: 12px;
  color: var(--main-color);
  padding-right: 90px;
}

.reply {
  border-color: #eee;
}

dl.obj_details {
  margin: 20px !important;
  width: auto !important;
  border-radius: 0px;
  padding: 20px !important;
  background-color: #fff !important;
  border-radius: 0;
  border-right: 2px solid var(--main-color);
}

dl.obj_details .altrow {
  background: none;
  width: 90%;
  background-color: #fff;
  border-radius: 10px;
}

dl.obj_details dt {
  float: right;
  width: 200px;
  padding: 10px;
  display: block;
  color: #444 !important;
}

dl.obj_details dt:after {
  content: ":";
  display: inline-block;
}

dl.obj_details dd {
  margin: 0 !important;
  color: #444;
  background-color: #fff;
  padding-top: 11px;
  display: block;
  border-bottom: 1px #ddd solid;
  border-radius: 0;
}

dl.obj_details dd:after {
  content: ".";
  display: block;
  height: 10px;
  clear: both;
  visibility: hidden;
}

dl.obj_details:after {
  content: ".";
  display: block;
  height: 10px;
  clear: both;
  visibility: hidden;
}

#right_now_container {
  border-radius: 10px;
  background-color: #fff;
  text-align: center;
}

#right_now_container .notice,
.chart_container .notice,
.notice {
  font-size: 11px;
  color: red;
  margin: 0 auto;
  display: block;
  text-align: center;
}

#right_now {
  font-size: 5em;
  display: block;
}

.narrow_chart {
  width: 325px !important;
}

.neverShow {
  display: none;
}

#dashboard #school_selection select {
  width: 222px;
  padding: 9px 20px;
  border-radius: 10px;
  float: right;
}

#dashboard .chartArea {
  height: 200px;
  text-align: center;
}

#dashboard .chart_container {
  background-color: #fff;
  overflow: hidden;
}

#dashboard .chart_container rect {
  fill: #fff;
}

#dashboard .chart_container text {
  fill: #444;
}

#dashboard .chart_container h3 {
  color: #939393;
  font-size: 14px;
  margin-right: 15px;
}

#dashboard .widescreen {
  width: 969px;
}

#dashboard img.loading {
  vertical-align: middle;
}

#dashboard input {
  width: 125px;
  margin: 10px;
  padding: 10px !important;
}

#dashboard label {
  width: auto;
  margin: 10px;
}

#dashboard .single_value_cell {
  background-color: #fff;
  border: 1px #aaa solid;
  padding: 10px;
  margin: 10px;
  width: 200px;
  height: 60px;
  border-radius: 10px;
  text-align: center;
  float: right;
}

#dashboard .single_value_cell span.title {
  color: #555;
  display: block;
}

#dashboard .single_value_cell span.value {
  color: #1b90c0;
  font-size: 22px;
  font-weight: bold;
}

#dashboard .first {
  margin-right: 0;
}

#dashboard {
  padding: 0 !important;
}

.page-body {
  width: 100%;
}

.vertical_list ul {
  float: right;
  display: block;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px 0px #aaa;
  -moz-box-shadow: 0 0 5px 0px #aaa;
  -webkit-box-shadow: 0 0 5px 0px #aaa;
  padding: 0;
  width: 100%;
  margin: 10px 0;
}

.vertical_list ul h3.list_title {
  margin: 3px;
  color: #fff;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  padding: 15px;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px 1px 1px #568F23;
  background-image: linear-gradient(bottom, #04617d 10%, #1f809d 46%, #2e98b9 77%);
  background-image: -o-linear-gradient(bottom, #04617d 10%, #1f809d 46%, #2e98b9 77%);
  background-image: -moz-linear-gradient(bottom, #04617d 10%, #1f809d 46%, #2e98b9 77%);
  background-image: -webkit-linear-gradient(bottom, #04617d 10%, #1f809d 46%, #2e98b9 77%);
  background-image: -ms-linear-gradient(bottom, #04617d 10%, #1f809d 46%, #2e98b9 77%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.1, #04617d), color-stop(0.46, #1f809d), color-stop(0.77, #2e98b9));
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius: 5px 5px 0px 0px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.vertical_list ul div.list_container {
  overflow-y: auto;
  overflow-x: hidden;
  height: 300px;
  max-height: 500px;
  margin-bottom: 10px;
  margin-top: 5px;
}

.vertical_list ul h3.list_title_green {
  margin: 3px;
  color: #fff;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  padding: 15px;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px 1px 1px #568F23;
  background-color: #9DD929;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.02, #7bc043), color-stop(0.51, #8bc642), color-stop(0.87, #9ed929));
  background: -moz-linear-gradient(center bottom, #7bc043 2%, #8bc642 51%, #9ed929 87%);
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius: 5px 5px 0px 0px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.vertical_list ul li {
  display: block;
  margin: 10px 5px 0px 10px;
  border-bottom: 1px #eaeaea solid;
  position: relative;
}

.vertical_list ul li img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  box-shadow: 0 0 5px 0px #aaa;
  -moz-box-shadow: 0 0 5px 0px #aaa;
  -webkit-box-shadow: 0 0 5px 0px #aaa;
  vertical-align: middle;
  margin: 0 10px;
}

.vertical_list ul li span.background-rank {
  font-size: 35px;
  font-weight: bold;
  color: #e9e9e9;
  float: left;
}

.vertical_list ul li div.user_info {
  position: relative;
  float: right;
}

.vertical_list ul li div.user_pic {
  float: right;
  position: relative;
  top: -5px;
}

.vertical_list ul li span.main_text {
  display: inline-flex;
  color: #444;
  font-size: 12px;
  margin: 0 0 7px 0;
}

.vertical_list ul li span.sub_text_details {
  font-size: 10px;
  color: #777;
  display: inline-flex;
}

.vertical_list ul li span.sub_text {
  color: var(--main-color);
}

.larger-font.vertical_list ul li span.sub_text_details,
.vertical_list ul li span.main_text {
  font-size: 13px;
}

.larger-font.vertical_list ul li span.sub_text_details {
  margin: 5px 0;
}

#success_partners_list ul li img {
  width: 150px;
  margin: 0 auto;
  vertical-align: middle;
}

#success_partners_list .boxgrid {
  height: 300px;
  overflow: hidden;
  position: relative;
  float: right;
  background-color: #fff;
  border: 1px #eee solid;
  margin: 10px;
  text-align: center;
  vertical-align: middle;
  box-shadow: none;
  width: 95%;
}
@media screen and (max-width: 550px) {
  #success_partners_list .boxgrid {
    height: 230px;
  }
}

#success_partners_list .boxgrid a {
  color: var(--main-color);
  text-decoration: none;
  font-size: 14px;
}

#success_partners_list .boxgrid .more {
  color: #444;
  text-decoration: none;
  font-size: 15px;
  position: absolute;
  bottom: 20px;
  left: 30px;
  z-index: 1;
}

#success_partners_list .boxgrid .more a:hover {
  background: none !important;
  color: rgba(var(--main-color-rgb), 90%);
}

#success_partners_list .boxgrid p {
  padding: 0 10px;
  color: #333;
  font-weight: normal;
  font-size: 11px;
  line-height: 20px;
  text-align: justify;
}

#success_partners_list .boxgrid ul {
  padding: 0 0 0 0;
}

#success_partners_list .boxgrid ul li {
  list-style: none !important;
  cursor: pointer;
  background: url(../../images/img/arrow_blue_rtl.png) right 6px no-repeat;
}

#success_partners_list .boxgrid h2 {
  color: #444;
  font-size: 15px;
  font-weight: bold;
}

#success_partners_list .boxgrid .cover h3 {
  color: #55a345;
  font-size: 17px;
  font-weight: normal;
}

#success_partners_list .boxgrid .cover {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 10;
  background: none;
  background-color: #fff !important;
  padding: 10px;
  width: 100%;
  height: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

#success_partners_list .boxgrid .cover img {
  position: static;
  transform: none;
  border-radius: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
}

#success_partners_list .boxgrid .boxgrid_content {
  color: #777;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  margin: 10px;
}

.successPartnerDetails {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 5px 0px #aaa;
  -moz-box-shadow: 0 0 5px 0px #aaa;
  -webkit-box-shadow: 0 0 5px 0px #aaa;
}

.successPartnerDetails .logo_container {
  float: right;
  margin-left: 10px;
}

.successPartnerDetails .logo {
  width: 200px;
  height: 200px;
  border-radius: 5px;
  border: 1px #e9e9e9 solid;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

.successPartnerDetails .logo:hover {
  border-color: #aaa;
}

.successPartnerDetails .basic_info {
  float: right;
  width: 400px;
  height: 200px;
  color: #444;
}

.successPartnerDetails .logo img {
  vertical-align: middle;
}

.successPartnerDetails .map {
  width: 200px;
  height: 200px;
  padding: 10px;
  border-radius: 5px;
  float: left;
  border: 1px #e9e9e9 solid;
}

.successPartnerDetails h3 {
  color: #444;
  font-size: 20px;
  margin: 0;
}

#scoreBar {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}

.score_class_icon {
  vertical-align: middle;
  margin: 0 5px;
  margin-bottom: 10px;
}

.current_card {
  margin-top: 10px;
}

.card_container {
  position: relative;
  background-position: left bottom;
  background-repeat: no-repeat;
  margin: 0 auto;
  margin-top: 10px;
}

.card_container img {
  margin: 0 auto;
}

.card_profile_pic img {
  position: absolute;
  right: 10px;
  top: 80px;
  width: 50px;
  height: 50px;
  border-radius: 2px;
  border: 2px #fff solid;
}

.card_name {
  position: absolute;
  right: 70px;
  top: 90px;
  color: #fff;
  font-size: 13px;
}

.card_exp_date {
  position: absolute;
  left: 10px;
  bottom: 6px;
  color: #fff;
  font-size: 12px;
}

.scores_info {
  text-align: center;
}

.online_users_list {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 300px;
  max-height: 500px;
}

.vertical_list_narrow {
  float: right;
  display: block;
  background-color: #fff;
  border-radius: 10px;
  width: 290px;
  margin: 10px 0 10px 15px;
  padding: 10px;
  box-shadow: 0 0 5px 0px #aaa;
  -moz-box-shadow: 0 0 5px 0px #aaa;
  -webkit-box-shadow: 0 0 5px 0px #aaa;
}

.classera_block {
  padding: 10px;
  box-shadow: 0 0 5px 0px #aaa;
  -moz-box-shadow: 0 0 5px 0px #aaa;
  -webkit-box-shadow: 0 0 5px 0px #aaa;
  background-color: #fff;
  border-radius: 10px;
  color: #444;
}

.float {
  float: right;
}

.widescreen {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.vertical_list_narrow h3 {
  font-size: 12px;
  color: var(--main-color);
}

.vertical_list_narrow h3 .count {
  color: var(--main-color);
}

#search_box #parents_search_box {
  width: 100%;
  padding: 11px;
  /*margin: 0 10px 0 0 !important; */
  background-image: url(../../img/search_icon.png);
  background-position: 4px center;
  background-repeat: no-repeat;
}

#dashboard #search_box #parents_search_box {
  width: 100% !important;
}

.activity_indicator {
  height: 300px;
}

#users_add_list div.input.checkbox {
  width: 412px;
  float: right;
  font-size: 12px;
}

#users_add_list {
  height: 320px;
  overflow: auto;
  color: #000000;
  padding: 10px;
}

/* This is important for fixing a bug in Google Charts "Visualization" for layouts in RTL direction */
.chartArea svg + div {
  display: none;
}

.grid__autosearch input[type=checkbox],
.grid__autosearch input[type=radio] {
  opacity: 0;
  position: absolute;
  z-index: 12;
  width: 18px;
  height: 18px;
  cursor: pointer;
  min-height: auto;
}

.radio input[type=radio],
.radio-inline input[type=radio],
.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox] {
  float: right;
  margin-right: -3px;
  margin-left: -3px;
  margin-left: 0;
}

.padding_checkbox {
  padding: 8px;
}

.poolFeedContainer {
  width: 95%;
  padding: 15px;
}

.poolFeedContainer ul.poolFeeds {
  list-style: none;
}

.poolFeedContainer ul.poolFeeds li {
  display: block;
  background-color: #f7f7f7;
  border: 1px #ccc solid;
  height: 100px;
  padding: 10px;
}

.poolFeedContainer ul.poolFeeds li img {
  width: 80px;
  height: 80px;
  margin: 10px;
  float: right;
  border: 1px silver solid;
  padding: 3px;
}

.poolFeedContainer ul.poolFeeds li span.feedTitle {
  color: #0c4d60;
  font-weight: bold;
  display: block;
}

.classeraPool #closeButton {
  width: 20px;
  height: 20px;
  background-color: var(--main-color);
  border: 0px #ddd solid;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  color: #fff;
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  padding-left: 1px;
}

.classeraLibrary {
  display: block;
  width: 950px;
}

.classeraPool {
  display: none;
  z-index: 100;
  position: fixed;
  padding: 10px;
  top: 50%;
  right: 50%;
  height: 500px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  margin-top: -250px;
  width: 50%;
  margin-right: -25%;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 3px 3px #ccc;
  overflow-y: auto;
  border: 1px #eee solid;
}

.classeraPool h3 {
  color: var(--main-color);
  text-align: center;
}

div.share3 input {
  margin-left: -20px !important;
}

div.share3 label {
  margin: 0 20px !important;
}

ul.classera_default_ul,
.classera_default_ul ul,
.default_list_container ul {
  padding: 10px;
  list-style: none;
  text-align: right;
}

ul.classera_default_ul li:before,
.classera_default_ul ul li:before,
.default_list_container ul li:before {
  content: "◀";
  font-size: 12px;
  color: var(--main-color);
  font-family: arial !important;
  margin-left: 10px;
}

ul.classera_default_ul li,
.classera_default_ul ul li,
.default_list_container ul li {
  margin-right: 15px;
  margin-bottom: 10px;
  margin-top: 10px;
  text-align: justify;
}

.page-header .align_center {
  text-align: center;
  color: #ed4e2a !important;
}

.sections_list label {
  padding: 0 10px;
}

.absolute_form_side_panel {
  position: absolute;
  width: 300px;
  height: 400px;
  padding: 10px;
  overflow: hidden;
  top: 82px;
  left: 50px;
}

#add_attachment {
  width: 130px;
  background-color: #fafafa;
  color: #444;
  font-size: 16px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
  display: block;
  text-align: center;
  float: none;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
}

.upload_attachment_wrapper {
  background-color: #fff;
  width: 95%;
  margin: 0 auto;
  padding: 10px;
  margin-top: 10px;
}

.copyright {
  position: relative;
  bottom: -30px;
  margin-bottom: 5px;
}

.main-container {
  /*//margin-bottom: 30px;*/
}

.main-container:after {
  /*//min-height: 1200px !important;*/
}

.page-content {
  position: relative;
  top: 10px !important;
}

/* Responsive for iPhone 5 & 5s :: Ashmawi*/
@media only screen and (max-width: 530px) {
  .page-body {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .navbar {
    height: 90px !important;
  }

  .navbar .navbar-inner {
    height: 100px !important;
  }

  .page-breadcrumbs {
    z-index: 12 !important;
  }

  .breadcrumb > li {
    font-size: 12px !important;
  }

  .breadcrumb {
    margin: 0 6px;
  }

  .paged_item .info {
    display: none;
  }

  .paged_block {
    min-height: 130px;
    width: 100%;
    position: relative;
    z-index: 0;
  }
}
.badge {
  padding: 4px 6px 3px 6px !important;
}

/******** End the style for increasing the hight of the the main upper navbar ***************/
.error_flash,
.warning_flash {
  background: #e46f61;
  margin-bottom: 15px;
  margin-top: 0;
  color: #fff;
  border-width: 0;
  padding: 10px;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-right: 5px solid #df5138;
}

.success_flash,
.saved_flash,
.deleted_flash,
.flash_success {
  background: #a0d468;
  margin-bottom: 15px;
  margin-top: 0;
  color: #fff;
  border-width: 0;
  padding: 10px;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-right: 5px solid #8cc474;
}

#sms-info1 {
  margin: 10px 0 20px 0;
}

.menu-text #count {
  float: left;
}

.navbar .navbar-inner .navbar-header .navbar-account .account-area .btn-group-justified .btn {
  padding: 5px 25px !important;
  border: none !important;
  width: 50%;
}

.login-area .profile span {
  color: #fdfdfd !important;
}

.unread {
  background-color: #eee !important;
}

.msg {
  /* margin-top: 0px; */
}

ul.rectangular_list li {
  padding: 10px;
  list-style: none;
  vertical-align: middle;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 0 0 5px 0px #aaa;
  -moz-box-shadow: 0 0 5px 0px #aaa;
  -webkit-box-shadow: 0 0 5px 0px #aaa;
  background-color: #fff;
}

#dashboard ul.rectangular_list li {
  height: 80px;
}

ul.rectangular_list li .label,
span.label {
  font-size: 13px;
  color: #444;
}

ul.rectangular_list li .value,
span.value {
  font-size: 23px;
  font-weight: bold;
  color: #85c042;
  display: block;
  margin: 0 auto;
  text-align: center;
}

#score_range_bar {
  background-color: #fff;
  border: 1px #eaeaea solid;
  padding: 20px 10px;
  border-radius: 10px;
}

#score_range_bar .legend {
  width: 200px;
  float: left;
  margin: 10px;
}

#score_range_bar .legend .legend_icon {
  width: 20px;
  height: 20px;
  border: 1px #000 solid;
  float: right;
  margin: 0 20px;
}

.form-select {
  margin: 0 7px;
}

#recipients_count_div {
  margin-bottom: 20px;
}

.ui-jqgrid .ui-jqgrid-hbox {
  padding-right: 20px;
}

.ui-jqgrid .ui-jqgrid-htable {
  table-layout: fixed;
  margin: 0;
  border: 1px solid #dfdfdf;
  background-color: #EEEEEF;
  text-align: vertical;
}

.ui-jqgrid .ui-jqgrid-htable th {
  height: 22px;
  padding: 0 2px 0 2px;
}

.ui-jqgrid .ui-jqgrid-htable th div {
  overflow: hidden;
  position: relative;
  margin-top: -10px;
}

.ui-th-column,
.ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
  overflow: hidden;
  white-space: normal;
  text-align: center;
  border-top: 0 none;
  border-bottom: 0 none;
  border-left-color: #dfdfdf;
  border-right-color: #dfdfdf;
  color: #005E6B;
  height: 40px;
}

.ui-th-ltr,
.ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {
  border-left: 0 none;
}

.ui-th-rtl,
.ui-jqgrid .ui-jqgrid-htable th.ui-th-rtl {
  border-right: 0 none;
}

.ui-jqgrid .ui-th-div-ie {
  white-space: nowrap;
  zoom: 1;
  height: 20px;
}

.ui-jqgrid .ui-jqgrid-resize {
  height: 20px !important;
  position: relative;
  cursor: e-resize;
  display: inline;
  overflow: hidden;
}

.ui-jqgrid .ui-grid-ico-sort {
  overflow: hidden;
  position: absolute;
  display: inline;
  cursor: pointer !important;
}

.ui-jqgrid .ui-icon-asc {
  margin-top: -3px;
  height: 12px;
}

.ui-jqgrid .ui-icon-desc {
  margin-top: 3px;
  height: 12px;
}

.ui-jqgrid .ui-i-asc {
  margin-top: 0;
  height: 16px;
}

.ui-jqgrid .ui-i-desc {
  margin-top: 0;
  margin-left: 13px;
  height: 16px;
}

.ui-jqgrid .ui-jqgrid-sortable {
  cursor: pointer;
}

.ui-jqgrid tr.ui-search-toolbar th {
  border-top-width: 1px !important;
  border-top-color: inherit !important;
  border-top-style: ridge !important;
}

div#library_pager {
  background-color: #eaeaea;
}

div.ui-jqgrid-pager {
  background-color: #eaeaea;
  padding: 10px 0;
  color: #777 !important;
}

div.ui-jqgrid-pager input {
  margin: 0 5px;
  padding: 1px 5px;
  border-radius: 5px;
}

div.ui-jqgrid-pager select {
  margin: 0 5px;
  padding: 1px 5px;
  border-radius: 5px;
}

div.ui-jqgrid-pager .ui-paging-info {
  margin: 0 20px;
  white-space: pre;
}

.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  min-height: auto;
}

/* states and images */
.ui-icon {
  width: 16px;
  height: 16px;
  background-image: url("../../js/images/ui-icons_222222_256x240.png");
}

.ui-widget-content .ui-icon {
  background-image: url("../../js/images/ui-icons_222222_256x240.png");
}

.ui-widget-header .ui-icon {
  background-image: url("../../js/images/ui-icons_ffffff_256x240.png");
}

.ui-state-default .ui-icon {
  background-image: url("../../js/images/ui-icons_ef8c08_256x240.png");
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
  background-image: url("../../js/images/ui-icons_ef8c08_256x240.png");
}

.ui-state-active .ui-icon {
  background-image: url("../../js/images/ui-icons_ef8c08_256x240.png");
}

.ui-state-highlight .ui-icon {
  background-image: url("../../js/images/ui-icons_228ef1_256x240.png");
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background-image: url("../../js/images/ui-icons_ffd27a_256x240.png");
}

/* states and images */
.ui-icon {
  display: block;
  overflow: hidden;
  background-repeat: no-repeat;
}

/* positioning */
.ui-icon-carat-1-n {
  background-position: 0 0;
}

.ui-icon-carat-1-ne {
  background-position: -16px 0;
}

.ui-icon-carat-1-e {
  background-position: -32px 0;
}

.ui-icon-carat-1-se {
  background-position: -48px 0;
}

.ui-icon-carat-1-s {
  background-position: -64px 0;
}

.ui-icon-carat-1-sw {
  background-position: -80px 0;
}

.ui-icon-carat-1-w {
  background-position: -96px 0;
}

.ui-icon-carat-1-nw {
  background-position: -112px 0;
}

.ui-icon-carat-2-n-s {
  background-position: -128px 0;
}

.ui-icon-carat-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
  background-position: -65px -16px;
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
  background-position: -64px -32px;
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
  background-position: 0 -48px;
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}

.ui-icon-arrow-4 {
  background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}

.ui-icon-extlink {
  background-position: -32px -80px;
}

.ui-icon-newwin {
  background-position: -48px -80px;
}

.ui-icon-refresh {
  background-position: -64px -80px;
}

.ui-icon-shuffle {
  background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}

.ui-icon-folder-open {
  background-position: -16px -96px;
}

.ui-icon-document {
  background-position: -32px -96px;
}

.ui-icon-document-b {
  background-position: -48px -96px;
}

.ui-icon-note {
  background-position: -64px -96px;
}

.ui-icon-mail-closed {
  background-position: -80px -96px;
}

.ui-icon-mail-open {
  background-position: -96px -96px;
}

.ui-icon-suitcase {
  background-position: -112px -96px;
}

.ui-icon-comment {
  background-position: -128px -96px;
}

.ui-icon-person {
  background-position: -144px -96px;
}

.ui-icon-print {
  background-position: -160px -96px;
}

.ui-icon-trash {
  background-position: -176px -96px;
}

.ui-icon-locked {
  background-position: -192px -96px;
}

.ui-icon-unlocked {
  background-position: -208px -96px;
}

.ui-icon-bookmark {
  background-position: -224px -96px;
}

.ui-icon-tag {
  background-position: -240px -96px;
}

.ui-icon-home {
  background-position: 0 -112px;
}

.ui-icon-flag {
  background-position: -16px -112px;
}

.ui-icon-calendar {
  background-position: -32px -112px;
}

.ui-icon-cart {
  background-position: -48px -112px;
}

.ui-icon-pencil {
  background-position: -64px -112px;
}

.ui-icon-clock {
  background-position: -80px -112px;
}

.ui-icon-disk {
  background-position: -96px -112px;
}

.ui-icon-calculator {
  background-position: -112px -112px;
}

.ui-icon-zoomin {
  background-position: -128px -112px;
}

.ui-icon-zoomout {
  background-position: -144px -112px;
}

.ui-icon-search {
  background-position: -160px -112px;
}

.ui-icon-wrench {
  background-position: -176px -112px;
}

.ui-icon-gear {
  background-position: -192px -112px;
}

.ui-icon-heart {
  background-position: -208px -112px;
}

.ui-icon-star {
  background-position: -224px -112px;
}

.ui-icon-link {
  background-position: -240px -112px;
}

.ui-icon-cancel {
  background-position: 0 -128px;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-close {
  background-position: -80px -128px;
}

.ui-icon-closethick {
  background-position: -96px -128px;
}

.ui-icon-key {
  background-position: -112px -128px;
}

.ui-icon-lightbulb {
  background-position: -128px -128px;
}

.ui-icon-scissors {
  background-position: -144px -128px;
}

.ui-icon-clipboard {
  background-position: -160px -128px;
}

.ui-icon-copy {
  background-position: -176px -128px;
}

.ui-icon-contact {
  background-position: -192px -128px;
}

.ui-icon-image {
  background-position: -208px -128px;
}

.ui-icon-video {
  background-position: -224px -128px;
}

.ui-icon-script {
  background-position: -240px -128px;
}

.ui-icon-alert {
  background-position: 0 -144px;
}

.ui-icon-info {
  background-position: -16px -144px;
}

.ui-icon-notice {
  background-position: -32px -144px;
}

.ui-icon-help {
  background-position: -48px -144px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-bullet {
  background-position: -80px -144px;
}

.ui-icon-radio-off {
  background-position: -96px -144px;
}

.ui-icon-radio-on {
  background-position: -112px -144px;
}

.ui-icon-pin-w {
  background-position: -128px -144px;
}

.ui-icon-pin-s {
  background-position: -144px -144px;
}

.ui-icon-play {
  background-position: 0 -160px;
}

.ui-icon-pause {
  background-position: -16px -160px;
}

.ui-icon-seek-next {
  background-position: -32px -160px;
}

.ui-icon-seek-prev {
  background-position: -48px -160px;
}

.ui-icon-seek-end {
  background-position: -64px -160px;
}

.ui-icon-seek-start {
  background-position: -80px -160px;
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
  background-position: -80px -160px;
}

.ui-icon-stop {
  background-position: -96px -160px;
}

.ui-icon-eject {
  background-position: -112px -160px;
}

.ui-icon-volume-off {
  background-position: -128px -160px;
}

.ui-icon-volume-on {
  background-position: -144px -160px;
}

.ui-icon-power {
  background-position: 0 -176px;
}

.ui-icon-signal-diag {
  background-position: -16px -176px;
}

.ui-icon-signal {
  background-position: -32px -176px;
}

.ui-icon-battery-0 {
  background-position: -48px -176px;
}

.ui-icon-battery-1 {
  background-position: -64px -176px;
}

.ui-icon-battery-2 {
  background-position: -80px -176px;
}

.ui-icon-battery-3 {
  background-position: -96px -176px;
}

.ui-icon-circle-plus {
  background-position: 0 -192px;
}

.ui-icon-circle-minus {
  background-position: -16px -192px;
}

.ui-icon-circle-close {
  background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}

.ui-icon-circle-check {
  background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-tl {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
}

.ui-corner-tr {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
}

.ui-corner-bl {
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.ui-corner-br {
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.ui-corner-top {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
}

.ui-corner-bottom {
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.ui-corner-right {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.ui-corner-left {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.ui-corner-all {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

/* Overlays */
.ui-widget-overlay {
  background: #666666 url("../../js/images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;
  opacity: 0.5;
  filter: Alpha(Opacity=50);
}

.ui-widget-shadow {
  margin: -5px 0 0 -5px;
  padding: 5px;
  background: #000000 url("../../js/images/ui-bg_flat_10_000000_40x100.png") 50% 50% repeat-x;
  opacity: 0.2;
  filter: Alpha(Opacity=20);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

/* Resizable
----------------------------------*/
.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  z-index: 99999;
  display: block;
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

/***********************/
.ui-jqgrid tr.jqgrow td {
  font-weight: normal;
  overflow: hidden;
  white-space: pre;
  height: 22px;
  padding: 0 2px 0 2px;
  border-bottom-width: 1px;
  border-bottom-color: #eaeaea;
  border-bottom-style: solid;
}

.ui-jqgrid tr.ui-row-ltr td {
  text-align: right;
  border-left-width: 1px;
  border-left-color: inherit;
  border-left-style: solid;
  border-left: none;
  border: none !important;
  white-space: normal !important;
  text-align: center;
  height: 40px;
  vertical-align: middle;
}

.ui-jqgrid tr.ui-row-rtl td {
  text-align: right;
  border-left-width: 1px;
  border-left-color: inherit;
  border-left-style: solid;
  border-left: none;
  white-space: normal !important;
  text-align: center;
  height: 40px;
  vertical-align: middle;
}

.ui-jqgrid .ui-jqgrid-resize-mark {
  width: 2px;
  left: 0;
  background-color: #777;
  cursor: e-resize;
  cursor: col-resize;
  position: absolute;
  top: 0;
  height: 100px;
  overflow: hidden;
  display: none;
  border: 0 none;
}

.ui-jqgrid .ui-pg-table {
  position: relative;
  padding-bottom: 2px;
  width: 40%;
  margin: 0 auto;
}

.ui-jqgrid .ui-pg-table td {
  font-weight: normal;
  vertical-align: middle;
  padding: 1px 19px;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
  border: 0px solid #fed22f;
  background: #ffe45c url("../../js/images/ui-bg_highlight-soft_75_ffe45c_1x100.png") 50% top repeat-x;
  color: #363636;
}

.ui-jqgrid .ui-state-disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
  /* For IE8 and earlier */
}

.ui-jqgrid .ui-pg-input {
  height: 20px;
  font-size: 0.8em;
  margin: 0;
}

.ui-jqgrid .ui-pg-selbox {
  font-size: 0.8em;
  line-height: 18px;
  display: block;
  height: 20px;
  margin: 0;
  width: 50px !important;
}

.ui-jqgrid .ui-separator {
  height: 20px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin: 1px;
  float: right;
}

.ui-jqgrid .ui-paging-info {
  font-weight: normal;
  height: 19px;
  margin-top: 3px;
  margin-right: 4px;
}

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div {
  padding: 1px 0;
  cursor: pointer;
  float: left;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  position: relative;
}

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon {
  float: left;
  margin: 0 2px;
}

/************************ Classic Table Style (Temp for success partners tables) **********************/
table.classic td.tfooter {
  border: none !important;
  font-size: 14px;
  font-weight: bold;
  padding: 15px;
  color: #fff;
  text-shadow: 1px 1px 1px #568F23;
  border: 1px solid #93CE37;
  background-color: #555;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.02, #282828), color-stop(0.51, #323242), color-stop(0.87, #3c3c50));
  background: -moz-linear-gradient(center bottom, #282828 2%, #323242 51%, #3c3c50 87%);
}

table.classic th {
  border-collapse: separate !important;
  color: #444;
  background-color: #fff;
  text-align: center;
  padding: 15px 7px !important;
  border-bottom: 1px solid #ddd;
}

table.classic th.first_column {
  border-radius: 0 20px 0 0;
}

table.classic th.last_column {
  border-radius: 20px 0 0 0;
  border-left: none;
}

table.classic td {
  padding: 8px;
  background-color: #fff;
  font-size: 13px;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  text-align: center;
}

table.classic {
  border-collapse: collapse;
  margin: 10px;
  width: 99%;
  outline: 1px solid #ddd !important;
  background: #fff;
}

table.classic tr.totalRow td {
  font-weight: bold;
  background-color: #eaeaea;
}

table.classic tr.totalOfTotalsRow td {
  font-weight: bold;
  background-color: #444;
  color: #fff;
}

table.classic td.center_content,
.center_content {
  text-align: center;
}

table.classic td.not_centered {
  text-align: right !important;
}

table.classic td.cell_separation,
table.classic th.cell_separation {
  border-left-width: 2px !important;
}

a.downloadButton {
  background: url(../../img/button_170_download_ltr.png) no-repeat top center;
  text-align: right;
  width: 175px;
  padding: 20px 20px 15px 60px;
  margin: 0 10px 10px 10px;
  float: right;
  height: 45px;
}

a.downloadAttach {
  background: url(../../img/attachment_24X24.png) no-repeat top center;
  text-align: right;
  width: 30px;
  padding: 20px 0px 15px 0px;
  margin: 0 0px 10px 0px;
  float: right;
}

a.downloadButton:hover {
  background: url(../../img/button_170_download_ltr_hover.png) no-repeat top center;
}

/************************* End Classic Table Style **********/
.report_wrapper {
  background-color: #fff;
  border: 1px #eaeaea solid;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

#reactions_element {
  margin: 0px auto;
  background-color: #fff;
  padding: 0;
  width: 100%;
  font-size: 13px;
  color: #888;
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
  max-width: 335px;
}

#reactions_element span {
  display: inline-block;
  margin: 0 2px;
}

#reactions_element span.disabled {
  pointer-events: none;
}

#reactions_element .btn.activated {
  background: var(--main-color);
  color: #FFF;
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: 0.65;
}

.reaction_status img {
  vertical-align: middle;
  cursor: pointer;
  width: 75px;
  height: 41px;
  margin: 0 10px;
}

.attachment_details_wrapper iframe {
  margin: 0 auto;
  display: block;
  width: 100%;
}

.collapsibleList li {
  list-style-image: url("../../js/collapsible_lists/button.png");
  cursor: auto;
}

li.collapsibleListOpen {
  list-style-image: url("../../js/collapsible_lists/button-open.png");
  cursor: pointer;
}

li.collapsibleListClosed {
  list-style-image: url("../../js/collapsible_lists/button-closed.png");
  cursor: pointer;
}

ul.parent {
  background: #fff;
  border: 1px #eee solid;
  width: 93%;
  padding: 30px;
  border-radius: 10px;
}

ul.collapsibleList {
  margin: 10px 0;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
}

ul.collapsibleList li span.title {
  font-size: 18px;
  color: #49c0f0;
}

#alertmod_grid_grid {
  display: none !important;
}

/*Invoice css*/
.kagan_form_header {
  height: 85px;
  background-color: #eaeaea;
  border-radius: 10px;
  border: 1px #bbb solid;
}

.Kagan_form_header_information span {
  display: block;
  width: 400px;
  float: right;
  margin: 10px 20px;
}

h1.form_title {
  width: 600px;
  float: right;
  margin: 15px;
}

.Kagan_form_header_information {
  border: 1px #bbb dashed;
  margin: 10px 0;
  border-radius: 10px;
}

h3.assignment_section_title {
  display: block;
  background-color: #999;
  color: #fff;
  margin: 20px;
  text-align: center;
  border-radius: 10px;
}

/* content editable */
.invoice_container {
  border-radius: 0.25em;
  min-width: 1em;
  outline: 0;
}

.invoice_container {
  cursor: pointer;
}

/*.invoice_container:hover, .invoice_container:focus, td:hover .invoice_container, td:focus .invoice_container, img.hover { background: #DEF; box-shadow: 0 0 1em 0.5em #DEF; }*/
.invoice_container span[contenteditable] {
  display: inline-block;
}

/* heading */
.invoice_container h1 {
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
}

/* table */
.invoice_article table {
  table-layout: fixed;
  width: 100%;
}

.invoice_article table {
  border-collapse: separate;
  border-spacing: 2px;
}

.invoice_article table th {
  border-width: 1px;
  padding: 0.5em;
  position: relative;
}

.invoice_article table th {
  border-radius: 0.25em;
  border-style: solid;
}

.invoice_article table th {
  background: #EEE;
  border-color: #BBB;
}

.invoice_article table td {
  border-color: #DDD;
  border: 1px solid #ccc;
  border-radius: 0.25em;
  border-style: solid;
  padding: 0.5em;
}

/* page */
.invoice_container {
  background: #999;
  cursor: default;
  border-radius: 5px;
}

.invoice_container {
  box-sizing: border-box;
  margin: 0 auto;
  overflow: hidden;
  padding: 0.5in;
  width: 90%;
}

.invoice_container {
  background: #FFF;
  border-radius: 1px;
  box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.1);
}

/* header */
.invoice_header .invoice_address {
  font-size: 11px;
}

.invoice_header {
  margin: 0 0 3em;
}

.invoice_header:after {
  clear: both;
  content: "";
  display: table;
}

.invoice_header h1 {
  background: #a0d468;
  border-radius: 0.25em;
  color: #FFF;
  margin: 0 0 1em;
  padding: 0.5em 0;
}

.invoice_header address {
  font-size: 75%;
  font-style: normal;
  line-height: 1.25;
  margin: 0 1em 1em 0;
}

.invoice_header address p {
  margin: 0 0 0.25em;
}

.invoice_header span,
.invoice_header img {
  display: block;
}

.invoice_header span {
  margin: 0 0 1em 1em;
  max-height: 25%;
  max-width: 60%;
  position: relative;
}

.invoice_header img {
  max-height: 100%;
  max-width: 100%;
}

/*.invoice_header input { cursor: pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; }*/
/* article */
.invoice_article,
.invoice_article address,
table.meta,
table.inventory {
  margin: 0 0 3em;
}

.invoice_article:after {
  clear: both;
  content: "";
  display: table;
}

.invoice_article h1 {
  clip: rect(0 0 0 0);
  position: absolute;
}

.invoice_article address {
  float: left;
  font-size: 125%;
  font-weight: bold;
}

/* table meta & balance */
.invoice_article table.meta,
table.balance {
  width: 36%;
}

.invoice_article table.meta:after,
table.balance:after {
  clear: both;
  content: "";
  display: table;
}

/* table meta */
.padding-6 {
  padding: 6px;
}

.invoice_article table.meta th {
  width: 40%;
}

.invoice_article table.meta td {
  width: 60%;
}

/* table items */
.sub_table_header {
  border: #ccc;
}

.sub_table_header tr th {
  padding: 5px;
  text-align: center;
}

.sub_table_header tr td {
  padding: 5px;
  text-align: center;
}

.invoice_article table.inventory {
  clear: both;
  width: 100%;
}

.invoice_article table.inventory th {
  font-weight: bold;
  text-align: center;
}

.invoice_article table.inventory td:nth-child(1) {
  width: 26%;
}

.invoice_article table.inventory td:nth-child(2) {
  width: 38%;
}

.invoice_article table.inventory td:nth-child(3) {
  text-align: right;
  width: 12%;
}

.invoice_article table.inventory td:nth-child(4) {
  text-align: right;
  width: 12%;
}

.invoice_article table.inventory td:nth-child(5) {
  text-align: right;
  width: 12%;
}

/* table balance */
.invoice_article table table.balance th,
table.balance td {
  width: 50%;
}

.invoice_article table table.balance td {
  text-align: right;
}

/* aside */
.invoice_footer h1 {
  border: none;
  border-width: 0 0 1px;
  margin: 0 0 1em;
}

.invoice_footer h1 {
  border-color: #999;
  border-bottom-style: solid;
}

.invoice_article table tr:hover .cut {
  opacity: 1;
}

div.required label:after,
label.required:after {
  color: #F00;
  content: " *";
}

/* Styles for jqgrid.ctp */
.ui-jqgrid-btable input[type=checkbox],
.ui-jqgrid-btable input[type=radio],
.cbox {
  position: relative !important;
}

.ui-jqgrid-btable .action-button {
  text-decoration: none;
}

.ui-jqgrid-btable .action-button:after {
  content: " | ";
  display: inline;
  color: #000;
  text-decoration: none;
}

.ui-jqgrid-btable .action-button:last-of-type:after {
  display: none;
}

.ui-jqgrid-btable .save-row,
.ui-jqgrid-btable .restore-row {
  display: none;
}

.ui-jqgrid-btable .editable .edit-row {
  display: none;
}

.ui-jqgrid-btable .editable .save-row,
.ui-jqgrid-btable .editable .restore-row {
  display: inline-block;
}

/* end styles for jqgrid.ctp */
/* View/Reports/schadmin_management_reports.ctp */
.multiple-school-error,
.no-school-error {
  display: none;
  color: red;
  position: relative;
  top: -25px;
}

.managment-report-loader {
  background: url(../../img/classera_loading.gif) no-repeat;
  width: 100px;
  height: 100px;
  margin: 16px auto;
  display: none;
}

.wideTableContainer > table#report-table > tbody > tr > td,
.wideTableContainer > table#report-table > thead > tr > th {
  white-space: normal;
}

.wideTableContainer [data-id] {
  color: var(--main-color);
  cursor: pointer;
}

.wideTableContainer [data-id]:hover {
  color: #23527c;
  text-decoration: underline;
}

.body-404 {
  background: #5f99cf !important;
}

.stay-left.btn-group > .btn:not(:first-child):not(.dropdown-toggle) {
  border-right: 1px solid #CCC;
  border-left: 0;
}

.stay-left.btn-group > .btn {
  float: left;
}

.horizontal-scroll {
  overflow-x: auto;
}

.msg_count {
  background: #df5138;
  border: 1px solid #fff !important;
  color: #fff;
}

.bg-surveys {
  color: #fdfdfd;
  background: #F00;
  padding: 4px 6px 3px 6px !important;
}

.courses_cover_title {
  color: #ffffff;
  bottom: 8%;
}

.icon_report {
  position: relative !important;
  margin-top: 11% !important;
  margin-left: 90%;
}

.msg-report {
  margin-top: 11%;
}

.text-alert {
  color: #FF6600;
}

.img_error_page {
  width: 100%;
  height: auto;
}

p.error_page_details {
  color: #6d6d6d;
  font-size: 16px;
}

/*.main_container
{
    background: #f7f7f7;

}*/
.date-calendar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: normal;
  border-top: solid red 5px;
  padding: 3px 0 5px;
  top: 29px;
  background: #FFF;
  color: #171717;
  border-radius: 5px;
  height: 55px;
  width: 50px;
  line-height: 22px;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.8em;
}

.date-calendar .day-name {
  display: block;
  color: var(--main-color);
  font-size: 16px;
}

.circled-date {
  text-align: center;
  border-radius: 50%;
  padding: 5px;
  border: 15px solid #FFF;
  background-color: #77B3D3;
  height: 120px;
  width: 120px;
  margin: 7px auto 20px;
  position: relative;
}

.circled-date .date-calendar {
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.responsive-image-ticket {
  max-width: 500px;
  max-height: 600px;
  display: block;
  margin: 10px auto;
}

.danger-text {
  color: #f00;
}

.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all {
  width: 100% !important;
  overflow-x: auto;
}

.open-status,
.in-progress-status,
.closed-status,
.pending-status,
.status-NotDoable,
.status-InQA,
.status-AddedToBacklog,
.status-PendingDevelopment,
.team-dropdown {
  background: #cf564f;
  color: #FFF;
  padding: 3px 5px;
  border-radius: 3px;
  width: 135px;
  text-align: center;
  display: inline-block;
}

.in-progress-status {
  background: #5cbdd9;
}

.closed-status {
  background: #5db55d;
}

.pending-status {
  background: #FF9800;
}

.status-AddedToBacklog {
  background-color: #E391DA;
}

.status-NotDoable {
  background-color: #FF1100;
}

.status-InQA {
  background-color: #DED625;
}

.status-PendingDevelopment {
  background-color: #05B093;
}

.status-PendingActivationtReply, .status-PendingThirdPartyReply {
  background: #d355ad;
  color: white;
  padding: 3px 5px;
  border-radius: 3px;
  width: 127px;
  text-align: center;
  display: inline-block;
}

.status-PendingThirdPartyReply {
  background: #4DB6AC;
}

.team-dropdown {
  background: purple;
}

.vertical-ticket {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  box-shadow: inset 0px 4px 6px #ccc;
  overflow: hidden;
  position: relative;
}

.progress-ticket {
  display: inline-block;
  margin: 2% 3%;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.progress-ticket:hover {
  opacity: 0.8;
}

.progress-bar-ticket {
  /*box-shadow: inset 0px 4px 6px rgba(100,100,100,0.6);*/
  position: absolute;
  height: 70%;
  left: 0;
  bottom: 0;
  width: 100%;
}

.progress-bar-pending-ticket {
  background: #ff9800;
}

.progress-bar-pending-activition-ticket {
  background: #d355ad;
}

.progress-bar-close-ticket {
  background: #42c07a;
}

.progress-bar-inProgress-ticket {
  background: #5cbdd9;
}

.progress-bar-open-ticket {
  background: #cf564f;
}

.progress-bar-third-party-ticket {
  background: #4db6ac;
}

.vertical-ticket .percentages {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #444;
  font-size: 1.3em;
  z-index: 100;
}

.ticket-report {
  text-align: center;
}

.title-bar-t {
  margin-top: 6px;
  font-size: 18px;
}

.title-pending {
  color: #ff9800;
}

.title-pending-activition {
  color: #d355ad;
}

.title-pending-third-party {
  color: #4DB6AC;
}

.title-inProgress {
  color: #5cbdd9;
}

.title-open-t {
  color: #cf564f;
}

.title-close {
  color: #42c07a;
}

.internal-error {
  color: #656565;
  margin-bottom: 3%;
}

.social-links {
  padding: 16px 0 0;
  text-align: center;
}

.social-links li {
  display: inline-block;
  font-size: 2em;
}

.social-links li a {
  text-decoration: none;
  color: #CCC;
  transition: color 0.2s ease-in-out;
}

.social-links li a.fa-facebook-official:hover {
  color: #3b5998;
}

.social-links li a.fa-twitter-square:hover {
  color: #42c0fb;
}

.social-links li a.fa-instagram:hover {
  color: #2d6a96;
}

.app-links {
  padding: 16px 0 0;
  text-align: center;
  list-style: none;
}

.app-links li {
  display: inline-block;
}

.app-links a {
  background: url("../../img/download-apps.png") no-repeat;
  width: 100px;
  height: 35px;
  cursor: pointer;
  display: block;
  border-radius: 7px;
  border: 1px solid #eee;
}

.app-links a i {
  display: none;
}

.app-links a.download-ios {
  background-position: top -1px left 0px;
  background-size: 214%;
}

.app-links a.download-android {
  background-position: top 0px right -2px;
  background-size: 214%;
}

.app-links a.download-ios:hover {
  background-position: top -51px left;
}

.app-links a.download-android:hover {
  background-position: top -51px right -2px;
}

.menu-compact .app-links i {
  display: inline;
}

.menu-compact .app-links a {
  height: 30px;
  line-height: 26px;
  font-size: 1.2em;
  text-decoration: none;
  color: #FFF;
  background: #666;
  padding: 6px;
  width: 100%;
  display: inline-block;
  margin: 5px auto;
  max-width: 32px;
  border-radius: 5px;
  transition: background 0.2s ease-in-out;
}

.menu-compact .app-links a:hover {
  background: #999;
}

.width-40 {
  width: 40%;
}

.minicolors-panel {
  direction: ltr !important;
}

#messages_count .badge.bg-red {
  background: #df5138 !important;
}

#messages_count .badge.msg_count {
  background: #df5138 !important;
}

p.success_partner_title {
  color: grey;
}

.float-none {
  float: none !important;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

.icons_size {
  width: 125px;
  height: 125px;
  margin: 5px;
  cursor: pointer;
}

.selecteds {
  border: 10px solid cyan;
  border-radius: 50%;
}

#iconscol {
  overflow-y: scroll;
  height: 420px;
  -webkit-box-shadow: 10px 10px 5px 0px #ebebeb;
  -moz-box-shadow: 10px 10px 5px 0px #ebebeb;
  box-shadow: 10px 10px 5px 0px #ebebeb;
}

@media print {
  .scrtabs-tab-container {
    display: none !important;
  }

  .resize_logo_on_print {
    width: 75px;
    height: 75px;
    margin-top: -25px;
  }

  .print-div-area {
    margin-top: -20px;
    font-size: 20px;
  }

  .on-print-table-margin {
    margin-top: -100px;
  }
}
.float-right-on-print {
  float: right;
  display: inline-block;
}

.float-left-on-print {
  float: left;
  display: inline-block;
}

.margin-top-on-print {
  margin-top: -20px;
}

@media screen and (max-width: 1024px) {
  #questions_grid td strong span {
    font-size: 12px !important;
  }

  #pg_questions_pager {
    width: 0;
  }

  .ui-jqgrid .ui-pg-table td {
    padding: 1px 2px;
    font-size: 10px;
  }
}
.teacher-absence-card {
  margin-bottom: 25px;
  border-radius: 10px;
  padding: 10px;
  background: #f3f3f3;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.25);
}
.teacher-absence-card.by_lecture {
  height: 250px;
  box-shadow: unset;
  background: #eee !important;
}

.absence-card-course {
  width: 100%;
  display: inline-block;
  padding: 0px;
}

.absence-card-course h4 {
  width: 100%;
  text-align: center;
  font-size: 16px !important;
}

.absences_buttons {
  display: inline-block;
  padding: 0px;
  width: 100%;
  text-align: center;
  margin: 1% 0px;
}

.absences_buttons button {
  width: 15%;
  height: 41px;
}

.absences_times h4 {
  text-align: center;
}

.modal-control {
  margin-right: auto;
  margin-left: auto;
  width: 100px;
  height: 33px;
  color: white;
  padding: 10px;
  font-size: 1.1em;
  border: 1px solid var(--main-color);
  background-color: var(--main-color);
  text-decoration: none;
}

.modal-control:hover {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  color: #fff;
  background-color: #fff;
  border-color: #ccc;
  text-decoration: none;
}

.mdoal-style {
  padding: 30px;
  margin: 0 auto;
  text-align: center;
}

.highlighted-date {
  background: #1e5799;
  /* Old browsers */
  background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799", endColorstr="#7db9e8", GradientType=0);
  /* IE6-9 */
  color: #FFF !important;
}

.highlighted-date p {
  color: #FFF !important;
}

.highlighted-date {
  background: #1e5799;
  /* Old browsers */
  background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799", endColorstr="#7db9e8", GradientType=0);
  /* IE6-9 */
  color: #FFF !important;
}

.highlighted-date p {
  color: #FFF !important;
}

.child-basic-info img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.reverse-dropdown {
  top: auto;
  bottom: 30px;
}

[src*="s3.amazonaws"][src*=profilepic] {
  position: relative;
  overflow: hidden;
}

[src*="s3.amazonaws"][src*=profilepic]:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url("/img/thumb.png?123") no-repeat;
  background-size: 100% 100%;
}

.dropdown-login-area .fontZoom span,
.dropdown-login-area .fontZoom p {
  color: #777;
  font-size: 12px;
  display: block;
  margin-bottom: 10px;
}

#quickLinks {
  width: 100%;
  height: 100%;
  background: black;
  position: fixed;
  z-index: 111111111;
  display: none;
}

#quickLinks .quickLinksParentBox {
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  width: 500px;
  z-index: 111111;
}

#quickLinks label {
  z-index: 1113;
  width: 100%;
  height: 44px;
  line-height: 44px;
  display: none;
  position: relative;
  padding: 0 !important;
  display: block !important;
}

#quickLinks label i {
  color: #8b8b8b;
  font-size: 25px;
  position: absolute;
  top: 18%;
  transition: all ease-in-out 0.3s;
}

#quickLinks input {
  border-radius: 20px;
  background: #fff;
  border-color: #fff;
  width: 100%;
  height: 100%;
  color: #777;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
}

#quickLinks input:focus + i {
  color: var(--main-color);
}

#quickLinks input::-webkit-input-placeholder {
  transition: all ease-in-out 0.5s;
}

#quickLinks input:focus::-webkit-input-placeholder {
  color: #a2a2a2;
  font-size: 10px;
  margin-top: -10px;
}

#quickLinks input:focus {
  outline: 0 !important;
}

#quickLinks .quickMask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
}

#quickLinks .listLinks {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  margin-top: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  max-height: 450px;
  overflow-y: scroll;
}

#quickLinks .listLinks a {
  display: block;
  padding: 10px 10px 10px;
  margin: 3px 0;
  border-bottom: 1px solid #eee;
  transition: all ease-in-out 0.4s;
  border-radius: 3px;
  color: #444;
  font-size: 13px;
  outline-color: #5db2ff;
}

#quickLinks .listLinks a:last-child {
  border-bottom: 0;
}

#quickLinks .listLinks a:hover,
#quickLinks .listLinks a:focus {
  background: #eee;
  text-decoration: none;
  outline: none;
}

#quickLinks .listLinks .source {
  padding: 3px 7px;
  border-radius: 10px;
  background: var(--main-color);
  color: #fff;
  font-size: 11px;
  margin: 0 9px;
}

#quickLinks .listLinks .noResult {
  font-size: 20px;
  text-align: center;
  display: block;
  margin: 0 13px;
  color: #777;
  display: none;
}

@media screen and (max-width: 550px) {
  #quickLinks .quickLinksParentBox {
    width: 300px;
  }
}
.outline-it *:focus {
  outline: 1px solid rgba(var(--main-color-rgb), 90%) !important;
  outline-offset: 3px !important;
}

.navbar a:focus,
.page-sidebar .sidebar-menu li a:focus {
  outline: 0 !important;
}

.courseTemplatesList .expandListButton {
  margin: 0 10px;
  color: #444;
}

.courseTemplatesList .expandListButton i {
  color: var(--main-color);
}

.ui-jqgrid .attendance_notes_field {
  padding: 0 !important;
  border-radius: 3px;
  height: 28px;
  width: 92%;
  resize: vertical;
}

a.attachment-tag {
  display: inline-block;
  padding: 3px 5px;
  margin: 0 3px;
  background: var(--main-color);
  color: #FFF;
  border-radius: 3px;
  text-decoration: none !important;
}

a.attachment-tag:hover {
  background: #4fa0e2;
}

#walkthrough_button:after {
  content: "";
  background: #c11818;
  font-size: 1.5em;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #c11818;
  margin: 0 3px;
  transition: all 0.2s ease-in-out;
}

#walkthrough_button.active:after {
  background: #94a900;
  border: 1px solid #94a900;
}

.outline-it input[type=checkbox]:checked,
.outline-it input[type=radio]:checked,
.outline-it input[type=checkbox]:focus,
.outline-it input[type=radio]:focus {
  outline: 1px solid #5db2ff !important;
  outline-offset: 3px !important;
}

.school_name {
  background-color: transparent;
  text-align: center;
}

.accreditations dl.obj_details dd {
  padding-top: 9px;
}

.evidence_accreditation {
  /*position: fixed;*/
  /*color: $black_text;*/
  /*background-color: transparent;*/
  /*z-index: 300;*/
}

.microphoneFab {
  color: #ffffff;
  border-radius: 50%;
  padding: 10px;
  background: #fff;
  text-decoration: none;
  height: 30px;
  width: 30px;
  box-shadow: 0 0 0px 7px rgba(255, 255, 255, 0.15);
  font-size: 1.2em;
  text-align: center;
  transition: ease-in-out 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.microphoneFab:hover, .navbar .linkButton:hover {
  box-shadow: 0 9px 10px rgba(0, 0, 0, 0.45);
  bottom: 102px;
}

table.exam-info-table {
  width: 99%;
  margin: 10px auto;
  color: #444;
}

table.exam-info-table tr:nth-child(even) {
  background: #EEE;
}

table.exam-info-table tr td {
  padding: 6px !important;
}

.report_content {
  top: 20px;
  position: absolute;
  transition: all ease-in-out 0.25s;
  font-size: 17px;
  z-index: 1;
}

.evaluationItems .item {
  padding-bottom: 10px;
  width: 95% !important;
  min-width: 300px;
  background: #fff !important;
  padding: 30px;
  border-radius: 4px;
  margin: 20px auto !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.evaluationItems .indicators {
  display: inline-block;
  margin: 5px;
  padding-left: 14px;
}

.evaluationItems .indicators:last-child {
  border-left: 0;
}

.evaluationItems .percentage {
  font-size: 11px;
  color: #787878;
  display: inline-block;
}

.evaluationItems input {
  position: relative;
  vertical-align: bottom;
}

.evaluationItems input[type=text] {
  background: #fff;
  border-radius: 3px;
  height: 25px;
  margin: 10px;
  font-size: 12px;
  padding: 10px 5px 10px 0;
  min-width: 175px;
}

.evaluationItems .indicators > span {
  display: block;
}

.evaluationItems input[type=checkbox] {
  margin: 0 10px;
}

.itemTitle {
  font-size: 18px;
  padding: 17px 0;
  position: relative;
}

.evaluationItems dl dd, .evaluationItems dl dt {
  background: #fff;
  border-radius: 0;
  padding-top: 15px;
}

.evaluationItems .item.obj_details {
  border-top: 3px solid var(--main-color);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
  border: 1px solid #eee;
  color: #444;
}

.table-bordered > tbody > tr > td[data-grade_id] {
  color: #444;
}

.table > tbody + tbody {
  border-top: 2px solid var(--main-color);
}

.evaluateeModal {
  margin-top: 8%;
}

.evaluateeModal .modal-body {
  overflow-x: auto;
  margin: 15px;
}

.evaluateeModal .modal-body form {
  box-shadow: none;
}

.questionWidgetBox {
  border-radius: 7px;
  border: 1px solid #eee;
  overflow: hidden;
  background: #fff;
}

.questionWidgetBox .questionBody {
  background: #fff;
  box-shadow: none;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--main-color);
  color: #444;
}

.questionWidgetBox .question {
  padding: 10px 30px;
}

@media screen and (max-width: 500px) {
  .questionWidgetBox .question {
    padding: 0 20px;
  }
}
.ClasseraPrimaryColors {
  color: var(--main-color);
}

.bordered-primary-color {
  border-color: var(--main-color) !important;
}

.page-body form fieldset fieldset {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.highlighted-date {
  background: #1e5799;
  /* Old browsers */
  background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799", endColorstr="#7db9e8",GradientType=0 );
  /* IE6-9 */
  color: #FFF !important;
}

.highlighted-date p {
  color: #FFF !important;
}

.highlighted-date {
  background: #1e5799;
  /* Old browsers */
  background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799", endColorstr="#7db9e8",GradientType=0 );
  /* IE6-9 */
  color: #FFF !important;
}

.highlighted-date p {
  color: #FFF !important;
}

#the_form i.deleteQuestion {
  color: #E57373;
  font-size: 1.5em;
  margin-top: 50%;
}

.reverse-dropdown {
  top: auto;
  bottom: 30px;
}

.dropdown-login-area .fontZoom div {
  display: inline-block;
  width: 31%;
  position: relative;
  height: 40px;
  text-align: center;
}

.dropdown-login-area .fontZoom input {
  display: block;
  margin: 0 auto;
  position: relative;
}

#lastMessages .btn.btn-success.btn-sm.white {
  display: none !important;
}

#lastMessages {
  width: 100%;
  height: 100%;
  background: black;
  position: fixed;
  z-index: 111111111;
  display: none;
}

#lastMessages #lastMessagesTable {
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  width: 700px;
  z-index: 111111;
  -webkit-box-shadow: 9px 18px 28px -12px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 9px 18px 28px -12px rgba(0, 0, 0, 0.75);
  box-shadow: 9px 18px 28px -12px rgba(0, 0, 0, 0.75);
}

#messagesTable {
  border-radius: 10px !important;
}

.accreditations dl.obj_details dd {
  padding-top: 9px;
}

table.exam-info-table {
  margin: 16px;
}

.webcam-notice {
  background: var(--main-color) !important;
  color: #FFF;
}

/*.microphoneFab{
    display: block !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 2px 10px #ccc;
    background: $primary;
    text-align: center;
    color: #ffffff;
    padding-top: 9px;
    font-size: 24px;
    z-index: 11211111111112;
    cursor: pointer;

}*/
.canvasWrap {
  width: 40%;
  margin: 0 auto;
  background-color: #fff;
  margin-top: 10px;
  border-radius: 20px;
}

.ttsWrapper {
  width: 90%;
  margin: 0 auto;
  display: block;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: 40%;
  max-height: 270px;
  min-width: 320px;
  overflow: hidden;
}

.ttsWrapper .cnanvasBox {
  height: 100px;
  padding: 0;
  display: block;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.ttsWrapper .ttsTextBox {
  display: block;
  padding-top: 46px;
}

.textToSpeech {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.55);
  display: none;
  height: 100%;
  width: 100%;
  z-index: 1111111111;
  left: 0;
  top: 0;
}

.soundgraph {
  display: inline-block !important;
  width: 30%;
  font-size: 3em;
  text-align: center;
  animation-name: grow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.recognizer {
  display: inline-block !important;
  text-align: center;
  width: 67%;
  color: #444;
  font-size: 3em;
}

.textToSpeechcommands {
  position: fixed;
  display: none;
  height: 100%;
  width: 100%;
  z-index: 1111111111;
  left: 0;
  top: 0;
}

.ttMask {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.55);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ttcommandsWrapper {
  width: 97%;
  margin: 0 auto;
  display: block;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 52px;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  top: 50%;
  transform: translateY(-50%);
  height: 40%;
  text-align: center;
  min-height: 325px;
  min-width: 300px;
}

.mic2Wrapper {
  padding: 0 !important;
}

.microphoneFabCommands {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: block !important;
  background: var(--main-color);
  color: #ffffff;
  padding-top: 12px;
  font-size: 24px;
  cursor: pointer;
}

.ttcommandsWrapper .ttTitle {
  display: block;
  margin: 10px;
}

.ttcommandsWrapper .ttTitle p {
  display: inline-block;
  width: 69%;
}

.ttComandsDetails {
  display: block;
  width: 100%;
  padding-top: 16px;
}

@media only screen and (min-width: 768px) {
  .ttcommandsWrapper {
    font-size: 1.3em;
    width: 70%;
  }

  .ttsWrapper {
    width: 70%;
  }
}
@media only screen and (min-width: 1200px) {
  .ttcommandsWrapper, .ttsWrapper {
    width: 40%;
  }
}
@keyframes grow {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(2.3);
  }
}
.ttcommandsWrapper .ttIcon {
  color: #fff;
  width: 29%;
  text-align: center;
  font-size: 1.3em;
  vertical-align: top;
  padding-top: 4px;
}

.ttcommandsWrapper .ttIcon:before {
  width: 40px;
  height: 40px;
  background: var(--main-color);
  border-radius: 50%;
  padding: 9px 5px;
  position: relative;
  display: inline-block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.215);
}

#rec2 {
  font-size: 1.3em;
  background-color: rgba(0, 0, 0, 0.1);
}

#myCanvas {
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: 0;
}

.ExamPreviewBox .widge .widget-body {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: 9px 20px;
}

.activation_engagement_info span:before {
  background: none;
}

.activation_engagement_info .rateBox p {
  font-size: 18px;
  color: #bebebe;
}

.activation_engagement_info .rateBox p.active {
  color: var(--main-color);
}

.activation_engagement_info .rate div {
  display: inline-block;
  vertical-align: top;
}

.manageSchedule {
  background: #f3f3f3;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 7px;
  padding: 15px;
}
.manageSchedule input.search {
  padding: 7px 15px;
  display: block;
  width: 100%;
  margin: 8px auto;
  background: #fff;
  border-radius: 25px;
}
.manageSchedule #schoolSettingsTab {
  padding-top: 15px;
}
.manageSchedule #schoolSettingsTab .preLoad {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.manageSchedule .box {
  box-shadow: none;
}
.manageSchedule .box ul li {
  display: block;
  font-size: 14px;
  color: #444;
  margin: 7px 0;
  padding: 10px;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
  border-radius: 4px;
  text-transform: capitalize;
  position: relative;
  background: #fff;
}
.manageSchedule .box ul li .check-icon {
  margin: 0 5px;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  font: normal normal normal 16px/1 FontAwesome;
  vertical-align: middle;
}
.manageSchedule .box ul li .check-icon:before {
  content: "\f096";
  color: var(--main-color);
}
.manageSchedule .box:not(.schoolsOptionList) ul {
  height: 300px;
  max-height: 300px;
  overflow-y: auto;
}
.manageSchedule .box ul li:hover {
  background: #eee;
  color: #444;
}
.manageSchedule .box ul li.selected {
  background: var(--main-color);
  color: #fff;
}
.manageSchedule .box ul li.selected .check-icon:before {
  content: "\f046";
  color: #fff;
}
.manageSchedule .preLoad {
  text-align: center;
}
.manageSchedule .SchoolsOption {
  margin: 0;
}
.manageSchedule .SchoolsOption .btn {
  width: 150px;
  padding: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}
.manageSchedule #manageScheduleModal .hidden-print {
  display: none;
}
.manageSchedule .tab-content {
  box-shadow: none;
  padding: 25px 1px 1px;
}
.manageSchedule .manageSchaduleWizardWrapper {
  padding: 15px;
}
.manageSchedule .manageSchaduleWizardWrapper .wizardTabs.nav-tabs {
  display: flex !important;
  align-items: start;
  justify-content: space-between;
}
.manageSchedule .manageSchaduleWizardWrapper .wizardTabs.nav-tabs li {
  padding: 0;
  flex: 1;
}
.manageSchedule .manageSchaduleWizardWrapper .wizardTabs.nav-tabs li a {
  background: transparent;
  padding: 15px 0;
  border: 0;
  border-top: 0;
  box-shadow: none;
  text-align: center;
}
@media screen and (max-width: 550px) {
  .manageSchedule .manageSchaduleWizardWrapper .wizardTabs.nav-tabs li a {
    font-size: 60%;
  }
}
.manageSchedule .manageSchaduleWizardWrapper .wizardTabs.nav-tabs li .wizard_circle {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 10px;
}
.manageSchedule .manageSchaduleWizardWrapper .wizardTabs.nav-tabs li .wizard_circle_wrapper {
  position: relative;
}
.manageSchedule .manageSchaduleWizardWrapper .wizardTabs.nav-tabs li .wizard_circle_wrapper:before {
  content: "";
  width: 100%;
  height: 2px;
  background: #ddd;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: -1;
}
.manageSchedule .manageSchaduleWizardWrapper .wizardTabs.nav-tabs li.active a {
  border-top: 0 !important;
  background: transparent;
  color: #444;
}
.manageSchedule .manageSchaduleWizardWrapper .wizardTabs.nav-tabs li.active a .wizard_circle {
  background: var(--main-color);
  color: #fff;
}
.manageSchedule .manageSchaduleWizardWrapper .wizardTabs.nav-tabs li .error {
  color: #e5301c;
}
.manageSchedule #manageScheduleModal .workingDays ul li.selected {
  background: var(--main-color);
  color: #fff;
}
.manageSchedule #manageScheduleModal .workingDays li {
  cursor: pointer;
}
.manageSchedule #manageScheduleModal .timeOffSchedule .table {
  border: 1px solid #eee;
}
.manageSchedule #manageScheduleModal .timeOffSchedule .table td, .manageSchedule #manageScheduleModal .timeOffSchedule .table th, .manageSchedule #manageScheduleModal .timeOffSchedule .table tr {
  cursor: pointer;
}
.manageSchedule #manageScheduleModal .timeOffSchedule .table td[disabled=disabled], .manageSchedule #manageScheduleModal .timeOffSchedule .table th[disabled=disabled], .manageSchedule #manageScheduleModal .timeOffSchedule .table tr[disabled=disabled] {
  pointer-events: none;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0.4;
}
.manageSchedule #manageScheduleModal .timeOffSchedule .table thead th:after {
  content: "\f063";
  font-family: FontAwesome;
  opacity: 0;
  color: #aeaeae;
  font-size: 10px;
  margin-right: 3px;
}
.manageSchedule #manageScheduleModal .timeOffSchedule .table thead th:hover:after {
  opacity: 1;
}
.manageSchedule #manageScheduleModal .timeOffSchedule .table thead tr th:first-child {
  cursor: unset;
}
.manageSchedule #manageScheduleModal .timeOffSchedule .table thead tr th:first-child:after {
  display: none;
}
.manageSchedule #generateScheduleLoader {
  width: 18px;
  margin-left: 5px;
}

.generate_schedule_swal .swal2-confirm:hover {
  background: rgba(var(--main-color-rgb), 90%) !important;
}

@media (min-width: 768px) {
  #manageScheduleModal .modal.in .modal-dialog {
    min-width: 600px;
    width: 60%;
  }
}
.manageSchedule #manageScheduleModal tbody td {
  border: 1px solid #ddd;
  position: relative;
}

.manageSchedule #manageScheduleModal tbody td span {
  width: 100%;
  height: 100%;
  background: #EF9A9A;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 22px;
  text-align: center;
  padding-top: 5px;
  color: #fff;
}

.manageSchedule .actionsBox, #schoolSettingsTab .actionBox {
  border-top: 2px dashed #fff;
  text-align: center;
  padding-top: 15px;
}

.manageSchedule .itemsOption, #manageScheduleModal .modal-title p {
  display: none;
}

#manageScheduleModal .modal-header {
  background: #fff;
  border-bottom: 1px solid var(--main-color);
}

#manageScheduleModal .modal-footer {
  background: #fff;
}

.manageSchedule #manageScheduleModal ul li,
#schoolSettingsTab .workingDays li,
#schoolSettingsTab .breakTimeslots li {
  display: inline-block;
  border: 1px solid var(--main-color);
  margin: 3px;
  padding: 7px;
}

#modalMessageError h4 {
  text-align: center;
  font-size: 18px !important;
}

#manageScheduleModal .moreOneSelected {
  display: none;
  color: #444;
  font-size: 16px;
  margin-bottom: 20px;
}

#manageScheduleModal .moreOneSelected i {
  color: #E57373;
  margin: 0 10px;
  font-size: 22px;
  vertical-align: bottom;
}

.manageSchedule .title {
  color: #444;
  padding: 0 10px;
}

.dataTables_filter {
  display: none;
}

.fontZoom .larg i {
  font-size: 18px;
  padding: 7px;
}

.fontZoom .normal i {
  padding: 10px;
}

.fontZoom span {
  height: 44px;
}

.fontZoom .xLarg i {
  font-size: 25px;
}

.fontZoom i {
  margin-top: 5px;
}

.fontZoom div i {
  color: #555;
}

/*form new design */
.formControlWrapper {
  position: relative;
  max-width: 100%;
}

.page-body form .form-group input, .form-control, select {
  border: 1px solid #d5d5d5;
  box-shadow: none !important;
  border-radius: 25px;
  min-height: 46px;
  transition: ease-in-out 0.4s;
  padding: 0 20px;
}

.page-body select {
  height: 46px;
}

.page-body form .form-group input:hover:not([type=file]), .form-control:hover:not([type=file]), select:hover {
  border: 1px solid #b0aeae !important;
}

.page-body form .form-group input:focus:not([type=file]), .form-control:focus:not([type=file]), select:focus {
  border: 1px solid var(--main-color) !important;
  animation: inputFocus 1s alternate linear;
}

.form-control, select {
  max-width: 100% !important;
  width: 100% !important;
  border: 1px solid #d5d5d5;
}

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

fieldset label, form label, .panel-label {
  font-size: 14px;
  margin: 10px 5px;
  color: #a0a0a0;
  margin-bottom: 10px;
}

/*custom select style  */
.page-body .select h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
}

.page-body .select h1 span {
  font-size: 13px;
  display: block;
  padding-left: 4px;
}

.page-body .select p {
  margin-top: 200px;
}

.page-body .select p a {
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  padding: 5px 10px;
  margin: 0 5px;
  background-color: #b83729;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.page-body .select p a:hover {
  background-color: #ab3326;
}

.page-body .select-hidden {
  display: none !important;
  visibility: hidden;
  padding-right: 10px;
}

.page-body .select {
  cursor: pointer;
  display: block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 100%;
  min-height: 40px;
  padding: 0 7px;
}
.page-body .select.disabled {
  cursor: not-allowed;
}

.page-body form.twoFieldsForm .select {
  width: 49%;
  display: inline-block;
}

.page-body form.twoFieldsForm .form-group .select {
  width: 100%;
  display: block;
  padding: 0;
}

.page-body .timepickerSelect {
  width: auto;
  display: inline-block;
  margin: 0 6px;
}

.page-body .select-styled {
  position: relative;
  background-color: #fff;
  padding: 13px 20px 8px;
  color: #999;
  border: 1px solid #d5d5d5;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  font-size: 12px;
  min-height: 45px;
  padding-top: 13px;
  border-radius: 25px;
  line-height: 1.4;
  min-width: 100px;
}

.page-body .select-styled.disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.4;
}

.page-body .form-group .select, #library_autosearch .select {
  padding: 0;
}

.page-body .select-styled:after {
  content: "\f107";
  width: 0;
  font-family: FontAwesome;
  height: 0;
  border: 6px solid transparent;
  position: absolute;
  top: 6px;
  left: 20px;
  font-size: 13px;
}

.page-body .select-styled:hover {
  background-color: #fff;
}

.page-body .select-styled:active, .select-styled.active {
  background-color: #fff;
}

.page-body .select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  padding: 0;
  list-style: none;
  background-color: #fff;
  color: #555;
  border: 1px solid #ccc;
  border-top: 0;
  max-height: 200px;
  overflow-y: auto;
  margin: 0px auto !important;
  width: 92%;
}

#StudentsTransferRequestSchadminTransferRequestForm .select-options {
  z-index: 99;
}

@media (max-width: 530px) {
  .page-body .select-options {
    width: 93%;
  }
}
@media (min-width: 531px) {
  .page-body .select-options {
    width: 92%;
  }
}
.jqgrid_search_fields .select-options {
  max-height: 112px !important;
}

.page-body .form-group .select-options, #library_autosearch .select-options {
  margin: 0;
}

.page-body .select-options li {
  margin: 0;
  padding: 9px 15px;
  text-indent: 0;
  border-top: 1px solid #f1f1f1;
  -moz-transition: all 0.15s ease-in;
  -o-transition: all 0.15s ease-in;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
  position: relative;
  font-size: 13px;
  color: #888;
}

li[data-optgroup]:after {
  content: attr(data-optgroup);
  display: block;
  position: absolute;
  bottom: 0;
  right: 6px;
  font-size: 0.7em;
}

.page-body .select-options li.active {
  background: rgba(0, 0, 0, 0.1);
}

.page-body form .select-options li:hover, .page-body form .select-options li.optionSelected {
  color: #888;
  background: #f6f8f9;
}

.page-body form .select-options li.optionSelected:before {
  content: "\f00c";
  position: absolute;
  left: 10px;
  top: 8px;
  color: #888;
  font-family: FontAwesome;
  font-size: 14px;
}

.page-body form .select-options li[rel=hide] {
  display: none;
}

.page-body form .form-group .control-label, .my_wallet_wrapper .control-label, .panel-label {
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 15px;
  display: block;
}

.page-body.loading-overlay:before {
  content: "";
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}

.content-report-flag {
  transition: all ease-in-out 0.25s;
}

.content-report-flag:hover {
  font-size: 24px;
}

.medicalRecord dl.obj_details dd {
  padding-top: 9px;
}

.diseasesList span, .clinicsList span, .inoculationsList span {
  display: block;
}

.page-body form.twoFieldsForm .form-group {
  width: 48%;
  display: inline-block;
  vertical-align: top;
  margin: 0 7px;
}

.page-body form.twoFieldsForm .uploadStudentPhoto .form-group {
  width: 100%;
}

input[type=checkbox], input[type=radio] {
  position: relative !important;
  float: none !important;
}

input[type=checkbox]:before, input[type=radio]:before {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--main-color);
  content: "";
  color: var(--main-color);
  font-size: 26px;
  line-height: 20px;
  text-align: center;
  font-weight: 100;
  padding-top: 0px;
  left: -2px;
  top: -2px;
}

input[type=radio]:before {
  border-radius: 50%;
}

input[type=radio]:checked:before {
  background: #fff;
  content: "\f058";
  border: 0;
  font-family: FontAwesome;
}

input[type=checkbox]:checked:before {
  background: #fff;
  content: "\f14a";
  border: 0;
  font-family: FontAwesome;
  font-size: 25px;
}

input[type=checkbox].partial:checked:before {
  content: "\f0c8";
}

.schools.form form, #insertCommentForm, #GradeTeacherFillReportCardForm, #comment-form, #date_filter,
#AbsenceAbsencesDetailedReportForm, #AbsenceAbsencesLecturesDetailedReportForm,
#LoginInfoSearchExportListForm, #BehaviorBehaviorsSummaryForm, #teacher_view_individual_gradesForm {
  width: 100%;
}

.schools.form form .formProgress, .grades.form form .formProgress, .withoutFormDesign form .formProgress, #ShortMessageSendSmsForm .formProgress {
  height: 0 !important;
}

.checkbox, .radio {
  margin: 12px;
}

.driverStudent .cardDriverStudent, .parentStudent .cardParentStudent {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
  transition: 0.3s;
  border-radius: 5px;
  text-align: center;
  border-top: 4px solid var(--main-color);
  padding: 10px 1px;
  position: relative;
  background: #fff;
  min-height: 350px;
}

.driverStudent .cardDriverStudent:hover, .parentStudent .cardParentStudent:hover {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
}

.driverStudent .userImage, .parentStudent .userImage {
  margin: 10px auto 30px;
  width: 150px;
  height: 150px;
  text-align: center;
}

.driverStudent .userImage img, .parentStudent .userImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.wrapperUserDriverContent p {
  position: relative;
}

.schools.form form, #insertCommentForm, #AbsenceTeachersDontTakeAttendanceForm, #change_status_form {
  width: 100%;
}

#AbsenceTeachersDontTakeAttendanceForm {
  width: 75%;
  min-width: auto;
}
@media only screen and (max-width: 530px) {
  #AbsenceTeachersDontTakeAttendanceForm {
    width: 100%;
    min-width: auto;
    padding: 5px 0;
  }
}

#combined_reportsForm,
#analysisForm,
#MessageComposeForm,
#teacher_view_individual_gradesForm,
#teacher_fill_reportForm,
#AbsenceLecturesAbsencesSummaryForm,
#ReportManagementReportsForm {
  width: 75%;
}
@media only screen and (max-width: 630px) {
  #combined_reportsForm,
#analysisForm,
#MessageComposeForm,
#teacher_view_individual_gradesForm,
#teacher_fill_reportForm,
#AbsenceLecturesAbsencesSummaryForm,
#ReportManagementReportsForm {
    width: 100%;
    min-width: auto;
    min-width: auto;
    padding: 5px 0;
  }
}

#MessageComposeForm {
  border: 2px solid #f3f3f3;
}

#teacher_view_individual_gradesForm .select-styled {
  margin: 0 10px;
}

#MessageShareIdeasForm {
  width: 75%;
  min-width: auto;
}
@media only screen and (max-width: 700px) {
  #MessageShareIdeasForm {
    width: 100%;
    min-width: auto;
    padding: 5px 0;
  }
}

.schools.form form, .grades.form form:not(#GradeEditForm), .withoutFormDesign form {
  box-shadow: none;
  background: transparent;
}

.schools.form form .formProgress, .grades.form form .formProgress, .withoutFormDesign form .formProgress, #ShortMessageSendSmsForm .formProgress {
  height: 0 !important;
}

.cardDriverStudent:hover {
  transform: scale(1.03);
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.25);
}

.cardDriverStudent .cardDriverStudentBell, .cardParentStudent .cardParentStudentBell {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 40px;
  margin: 20px auto 0;
}

.cardDriverStudent .startRing.cardDriverStudentBell, .cardParentStudent .startRing.cardParentStudentBell {
  -webkit-animation: ring 4s 0.7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s 0.7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s 0.7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

@keyframes inputFocus {
  0% {
    box-shadow: 0 0 0px 0px var(--main-color);
  }
  50% {
    box-shadow: 0 0 10px 1px var(--main-color);
  }
  70% {
    box-shadow: 0 0 0 0px var(--main-color);
  }
}
@-webkit-keyframes ring {
  0% {
    -webkit-transform: rotateZ(0);
  }
  1% {
    -webkit-transform: rotateZ(30deg);
  }
  3% {
    -webkit-transform: rotateZ(-28deg);
  }
  5% {
    -webkit-transform: rotateZ(34deg);
  }
  7% {
    -webkit-transform: rotateZ(-32deg);
  }
  9% {
    -webkit-transform: rotateZ(30deg);
  }
  11% {
    -webkit-transform: rotateZ(-28deg);
  }
  13% {
    -webkit-transform: rotateZ(26deg);
  }
  15% {
    -webkit-transform: rotateZ(-24deg);
  }
  17% {
    -webkit-transform: rotateZ(22deg);
  }
  19% {
    -webkit-transform: rotateZ(-20deg);
  }
  21% {
    -webkit-transform: rotateZ(18deg);
  }
  23% {
    -webkit-transform: rotateZ(-16deg);
  }
  25% {
    -webkit-transform: rotateZ(14deg);
  }
  27% {
    -webkit-transform: rotateZ(-12deg);
  }
  29% {
    -webkit-transform: rotateZ(10deg);
  }
  31% {
    -webkit-transform: rotateZ(-8deg);
  }
  33% {
    -webkit-transform: rotateZ(6deg);
  }
  35% {
    -webkit-transform: rotateZ(-4deg);
  }
  37% {
    -webkit-transform: rotateZ(2deg);
  }
  39% {
    -webkit-transform: rotateZ(-1deg);
  }
  41% {
    -webkit-transform: rotateZ(1deg);
  }
  43% {
    -webkit-transform: rotateZ(0);
  }
  100% {
    -webkit-transform: rotateZ(0);
  }
}
@-moz-keyframes ring {
  0% {
    -moz-transform: rotate(0);
  }
  1% {
    -moz-transform: rotate(30deg);
  }
  3% {
    -moz-transform: rotate(-28deg);
  }
  5% {
    -moz-transform: rotate(34deg);
  }
  7% {
    -moz-transform: rotate(-32deg);
  }
  9% {
    -moz-transform: rotate(30deg);
  }
  11% {
    -moz-transform: rotate(-28deg);
  }
  13% {
    -moz-transform: rotate(26deg);
  }
  15% {
    -moz-transform: rotate(-24deg);
  }
  17% {
    -moz-transform: rotate(22deg);
  }
  19% {
    -moz-transform: rotate(-20deg);
  }
  21% {
    -moz-transform: rotate(18deg);
  }
  23% {
    -moz-transform: rotate(-16deg);
  }
  25% {
    -moz-transform: rotate(14deg);
  }
  27% {
    -moz-transform: rotate(-12deg);
  }
  29% {
    -moz-transform: rotate(10deg);
  }
  31% {
    -moz-transform: rotate(-8deg);
  }
  33% {
    -moz-transform: rotate(6deg);
  }
  35% {
    -moz-transform: rotate(-4deg);
  }
  37% {
    -moz-transform: rotate(2deg);
  }
  39% {
    -moz-transform: rotate(-1deg);
  }
  41% {
    -moz-transform: rotate(1deg);
  }
  43% {
    -moz-transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(0);
  }
}
.questions_group form, .modal-body form, table form, .attachDesc form, #msform, form.navbar-form.navbar-default {
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
  min-width: auto;
}

.uploadAttachmentPage form, #CourseWeeklyStudyPlanForm {
  width: 100%;
  min-width: auto;
}

.attachDesc form, .inbox_view_wrapper form {
  width: 100%;
}

.form-group input[type=file] {
  width: auto !important;
  display: inline-block;
}

.attachDesc div {
  margin: 0 7px;
  color: #777;
  font-size: 12px;
}

.attachDesc div span {
  color: #444;
  font-size: 14px;
}

.attachDesc label.star {
  padding: 0;
  margin: 0 5px;
}

.uploadAttachmentPage h2 {
  padding: 12px;
  color: #444;
}

.finalsub_grade_submission {
  background: #fff;
  box-shadow: none;
}

.widget.separated {
  border: 1px solid #ddd;
  box-shadow: none;
}

.widget.separated .widget-body {
  box-shadow: none;
  background: #fff;
}

.widget.separated h4 span {
  color: #444 !important;
}

.widget.separated h4 {
  padding: 0 20px;
  color: #444;
}

.widget.separated .widget-header > .widget-caption {
  font-size: 17px;
  padding: 4px;
}

.widget.separated .widget-header {
  min-height: 40px;
  border-bottom: 0;
}

#recipients_count_div button {
  padding: 8px !important;
}

@media only screen and (max-width: 1725px) {
  .page-body form.twoFieldsForm .form-group {
    margin: 4px;
  }

  .page-body form.twoFieldsForm .select {
    padding: 4px;
  }
}
@media only screen and (max-width: 1120px) {
  .page-body form.twoFieldsForm .form-group, .page-body form.twoFieldsForm .select {
    width: 100%;
  }
}
@media only screen and (max-width: 600px) {
  .page-body form fieldset {
    padding: 12px;
  }
}
@media only screen and (max-width: 530px) {
  .page-body form {
    width: 100%;
    min-width: auto;
    padding: 5px 0;
  }

  .examType {
    height: 320px;
  }

  .page-body fieldset {
    padding: 0;
  }

  .page-body form fieldset {
    padding: 12px;
  }

  .default_list_container {
    min-width: 100% !important;
  }

  h1, h2, h3, h4, h5, h6 {
    padding-right: 5px;
    padding-left: 5px;
  }
}
form .uploadButton {
  width: 300px;
  border: 1px dotted #999;
  display: block;
  height: 200px;
  text-align: center;
}

/* ----------------------------------------------------------------------------
upload Image style
// --------------------------------------------------------------------------*/
.ezdz-dropzone {
  position: relative;
  border-radius: 20px;
  font: bold 24px arial;
  text-align: center;
  width: 100%;
  height: 250px;
  line-height: 200px;
  border: 3px dotted lightgray;
  color: lightgray;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .ezdz-dropzone {
    width: 95% !important;
    margin-right: auto;
    margin-left: auto;
  }
}
.ezdz-dropzone span {
  border-radius: 20px;
  background: black;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 13px;
  font-weight: normal;
  max-width: 90%;
  vertical-align: middle;
  padding: 4%;
  line-height: 10px;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ezdz-dropzone img {
  object-fit: cover;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1 !important;
}

.ezdz-dropzone [type=file], .form-group .ezdz-dropzone [type=file] {
  cursor: pointer;
  position: absolute;
  width: 100% !important;
  height: 100%;
  opacity: 0;
  margin: 0;
  padding: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/*  .ezdz-focus {
        border: 3px dotted $primary;
        color: $primary;
    }*/
.ezdz-enter {
  border: 3px dotted #555;
  color: black;
}

.ezdz-accept {
  /*border: 3px dotted gray;*/
  color: gray;
}

.ezdz-reject {
  border: 3px dotted darkred;
  color: darkred;
}

.formMask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f3f3f3;
  z-index: 111111;
  border-radius: 26px;
}

.formLoading {
  width: 100px;
  height: 100px;
  margin: 16px auto;
  top: 100px;
  position: relative;
}

.header.bg-blue {
  background: var(--main-color) !important;
}

.timepickerSelectWrapper .select {
  width: auto;
  display: inline-block;
  margin: 0 6px;
}

.timepickerSelectWrapper .select .select-styled {
  padding: 13px 31px 8px;
}

.page-body form .form-group[hidden] {
  display: none;
}

@keyframes ring {
  0% {
    transform: rotate(0);
  }
  1% {
    transform: rotate(30deg);
  }
  3% {
    transform: rotate(-28deg);
  }
  5% {
    transform: rotate(34deg);
  }
  7% {
    transform: rotate(-32deg);
  }
  9% {
    transform: rotate(30deg);
  }
  11% {
    transform: rotate(-28deg);
  }
  13% {
    transform: rotate(26deg);
  }
  15% {
    transform: rotate(-24deg);
  }
  17% {
    transform: rotate(22deg);
  }
  19% {
    transform: rotate(-20deg);
  }
  21% {
    transform: rotate(18deg);
  }
  23% {
    transform: rotate(-16deg);
  }
  25% {
    transform: rotate(14deg);
  }
  27% {
    transform: rotate(-12deg);
  }
  29% {
    transform: rotate(10deg);
  }
  31% {
    transform: rotate(-8deg);
  }
  33% {
    transform: rotate(6deg);
  }
  35% {
    transform: rotate(-4deg);
  }
  37% {
    transform: rotate(2deg);
  }
  39% {
    transform: rotate(-1deg);
  }
  41% {
    transform: rotate(1deg);
  }
  43% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
.dashboard-block.well {
  background: transparent !important;
}

.page-body form .form-actions {
  text-align: center;
}

.ezdz-dropzone > div {
  font-weight: 400;
  padding-top: 0;
  position: absolute;
  background: url(../../img/uploadFileBg.jpg) no-repeat;
  background-size: cover;
  object-fit: contain;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
}

.developerRate:before, .activistionRate:before {
  display: none !important;
}

.cr-progress-bar {
  position: relative;
  display: block;
  height: 20px;
  width: 100%;
  background: #e0e0e0;
  overflow: hidden;
  border-radius: 3px;
  text-align: center;
}

.cr-progress-bar i {
  position: absolute;
  height: 100%;
  width: 0;
  background: #a0d468;
  top: 0;
  left: 0;
}

.courseCriteriaTitle a {
  color: #FFF;
  font-size: 1em;
}

.cr-progress-bar strong {
  color: #777;
  position: absolute;
  top: 0;
  line-height: 20px;
  right: 5px;
}

.exceptional_class form .formMask {
  display: none !important;
}

.exceptional_class form:before {
  background: transparent;
  z-index: -11;
}

.exceptional_class form {
  width: 100%;
  padding: 20px;
}

.exceptional_class form input[type=checkbox]:before {
  display: none !important;
}

.page-body .grid__autosearch .select-styled {
  width: 100%;
  min-height: 38px;
  line-height: 1;
}

.page-body .grid__autosearch .col-md-4.checkbox {
  margin: 0;
}

.widget.separated #users_add_list .input, .widget.separated #users_add_list div.checkbox {
  width: 98%;
  max-width: 100%;
  margin: 2px;
}

.widget.separated #users_add_list div.checkbox {
  border: 1px solid #eaeaea;
  padding: 0 7px 12px;
  border-radius: 4px;
}

#select-students #student_to_count {
  display: grid;
  grid-template-columns: 50% 50%;
}

#select-students #student_to_count .input {
  width: 100%;
  display: inline-block;
  padding: 0;
}
#select-students #student_to_count .input > .checkbox {
  height: 96%;
}

.widget.separated #users_add_list h2 a {
  color: var(--main-color);
  font-weight: 200;
}

@media only screen and (max-width: 1293px) {
  #msform #users_add_list #student_to_count .input {
    width: 100%;
    display: block;
    padding: 0;
  }
}
.zoomChatImage {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 11111111111111112;
  margin: 0 auto;
  left: 0;
  text-align: center;
  top: 0;
}

.zoomChatImage > div {
  width: 90%;
  height: 90%;
  max-width: 1000px;
  max-height: 700px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.zoomChatImage > div img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: contain;
}

.zoomChatImage span {
  position: absolute;
  right: -20px;
  top: 15px;
}

.zoomChatImage span i {
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}

.zoomChatImage .zoomMask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
}

div.dt-button-background {
  z-index: 222 !important;
}

@media screen and (max-width: 768px) {
  .manageSchedule .timeOffSchedule {
    overflow-x: auto;
  }

  .manageSchedule .modal {
    z-index: 11111111111;
  }
}
.actions button {
  border-radius: 25px;
}

.grid__autosearch .container div {
  margin: -1px 0;
}

.ezdz-dropzone .uploadIcon {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 40px;
  border: 2px solid #eee;
}

.ezdz-dropzone .uploadIcon:before {
  width: 100%;
  height: 100%;
  content: "";
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  top: 0;
  animation: wave 5s 3s infinite linear;
  border-radius: 50%;
}

.ezdz-dropzone i.fa-upload {
  position: absolute;
  top: 20%;
  font-size: 35px;
  left: 50%;
  transform: translateX(-50%);
}

.ezdz-dropzone > div .btn {
  position: relative;
  display: block;
  margin: 0 auto !important;
}

.ezdz-dropzone > div p {
  font-size: 15px;
  margin: 15px auto;
}

.browse-content-modal .modal-content, #add_discussion_room .modal-content, .canteenModal .modal-content {
  background-color: #fff;
  border-radius: 15px;
}

.browse-content-modal .modal-header, #add_discussion_room .modal-header, .canteenModal .modal-header {
  background-color: #fff;
  border-top-left-radius: 27px;
  border-top-right-radius: 27px;
  border-bottom: 0;
}

.browse-content-modal ul.video-type {
  text-align: center;
}

.evaluatees_users input[type=checkbox] {
  width: 25px !important;
  display: inline-block;
}

.evaluatees_users .select_all_evaluatees {
  margin: 15px 9px 0;
}

#AssessmentForm .bordered-palegreen {
  border: 0 !important;
}

#AssessmentForm .widget-body {
  background-color: #fff;
}

#online_users input {
  margin: 10px 8px;
  border-radius: 25px;
  font-size: 12px;
  width: 99%;
}

#online_users .table .checkbox {
  margin: 0;
}

#online_users .table .checkbox input {
  margin: 0;
}

#online_users .table .checkbox .padding_checkbox {
  padding: 0;
}

.dataTables_scrollBody {
  border: 1px solid #eee;
}

.ezdz-dropzone + #loadingContainer {
  position: relative;
  margin-top: -24px;
}

.actions .btn-group > .btn.dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin: 0;
  height: 45px;
}

.download-attachments {
  background: var(--main-color);
  border: 0;
  padding: 10px 20px;
  color: #fff;
  transition: all ease-in-out 0.4s;
  -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
  margin: 10px auto;
  border-radius: 25px;
  display: block;
  width: 140px;
  overflow: hidden;
}

.download-attachments i {
  font-size: 1.5em;
  display: inline-block;
  margin: 0 5px;
}

.download-attachments:hover {
  text-decoration: none;
  background: rgba(var(--main-color-rgb), 90%);
  color: #fff;
  box-shadow: 0 7px 8px #ccc;
}

.avatar-holder {
  margin: 0 0 16px;
}

.avatar-holder img {
  width: 70px;
  height: 70px;
  display: block;
  border-radius: 50%;
}

.avatar-holder h3 {
  display: inline-block;
  position: relative;
  top: 5px !important;
  padding: 0 5px;
}

.avatar-holder a {
  display: inline-block;
  position: relative;
  top: -5px !important;
  padding: 0 5px;
}

.stars-attachments-container {
  padding: 0;
}

.stars-attachments-container .stars form {
  width: 100%;
  background: transparent;
  padding: 0;
  margin: 0;
}

.header_middle .chosen-container {
  margin: 0 0 10px;
}

#visits_by_role_chart span.highcharts-title {
  top: 50% !important;
  transform: translateY(-50%);
}

.chosen-container#AttachmentLibrary_chosen {
  width: 100% !important;
}

#AttachmentEditForm h2, #AttachmentUploadForm h2 {
  color: #989797;
}

#sections_list .checkbox label {
  display: flex;
  align-items: center;
}

.modal-body form {
  margin-top: 0;
  padding-top: 0;
}

.modal-body form fieldset legend {
  top: 0;
  margin-bottom: 0 !important;
}

textarea[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.stuIndexLoading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 111;
  text-align: center;
  padding-top: 200px;
  display: none;
}

.reportCardsCoursesList .form-control,
.reportCardsCoursesList .form-control:hover,
.reportCardsCoursesList .form-control:focus,
.reportCardsCoursesList .form-control:active {
  background: transparent;
  border: 0 !important;
}

.reportCardsCoursesList .control-label {
  display: inline-block !important;
}

.reportCardsCoursesList .form-control input[type=checkbox], #CoursesTranscriptAttributeSchadminCustomizeCoursesPointsForm input[type=checkbox] {
  min-height: auto !important;
}

#AssessmentForm .widget-header {
  background: #f3f3f3 !important;
  color: #777;
}

#AssessmentForm .widget {
  box-shadow: none !important;
}

.template_final_result_report_table tr {
  background-color: #fff !important;
}

.template_final_result_report_table {
  border: 1px solid #eee;
}

.template_final_result_report_table td, .template_final_result_report_table th {
  display: table-cell;
  padding: 12px 10px !important;
}

.assessments.view .table th, .assessments.view .table tbody td {
  background-color: #fff;
}

.inbox_view_wrapper .sender_photo {
  border-radius: 50%;
  margin-top: -5px;
  border: 2px var(--main-color) solid;
}

.inbox_view_wrapper h2 {
  color: #777;
  font-weight: 100 !important;
  font-size: 18px;
  margin: 20px 0 0;
}

.inbox_view_wrapper .sender {
  color: #777;
}

#schadmin_upload_data_fileForm label {
  text-align: center;
}

#schadmin_upload_data_fileForm .ezdz-dropzone {
  margin: 0 auto;
}

input#mainLinksSideBar {
  border: 1px solid var(--main-color);
  box-shadow: none !important;
  border-radius: 25px;
  min-height: 32px;
  transition: ease-in-out 0.4s;
  padding: 0 20px;
  width: 100%;
}

input#mainLinksSideBar::-webkit-input-placeholder {
  color: var(--main-color);
}

#grid_grid input[type=checkbox] {
  position: static;
}

@media screen and (max-width: 750px) {
  .microphoneFab, .evidence_accreditation {
    display: none !important;
  }
}
@media screen and (max-width: 700px) {
  .actions {
    margin: 5px 13px;
  }

  .microphoneFab, .evidence_accreditation_nav_wrapper_li {
    display: none !important;
  }

  .actions .btn-group > .btn, .actions button, .actions .btn-group .btn-group {
    width: 100%;
  }

  .actions #add_new_question_dropdown_button, #add_new_question_dropdown_button_arrow {
    width: auto;
    margin-bottom: 0 !important;
  }
}
.activeMedical, .accordionMedical:hover {
  background-color: #fff;
}

.activeMedical:after {
  content: "−";
}

.studentNameMedical legend {
  padding-bottom: 20px;
}

dl.medicalDetails dd {
  margin: 0 !important;
  color: #444;
  background-color: #fff;
  padding-top: 10px;
  display: block;
  border-bottom: 1px #efefef solid;
  border-radius: 0;
}

.medicalNotFound p {
  font-size: 20px;
  padding: 20px;
  text-align: center;
  color: #989797;
}

.grid__autosearch input#autosearch {
  display: none;
}

#attachments .attachment-thumbnail {
  position: relative;
  display: inline-block;
}

#attachments .attachment-thumbnail .fa {
  color: red;
  position: absolute;
  top: -7px;
  right: -7px;
  font-size: 22px;
  cursor: pointer;
}

@media (max-width: 530px) {
  .page-body .select-options {
    width: 88%;
  }
}
.page-body .grid__autosearch .select-options {
  width: calc(100% - 34px);
  top: 93%;
}

.checkbox input[type=checkbox] {
  min-height: auto;
}

#form_profile_pic_upload .ezdz-dropzone {
  display: none;
}

#UserEditProfileForm {
  width: 100%;
  padding: 20px;
  min-width: auto;
}

#MessageComposeForm a.btn {
  background: var(--main-color);
  border: 0;
  padding: 10px 20px;
  color: #fff;
  transition: all ease-in-out 0.4s;
  -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
  margin: 0 7px;
  border-radius: 25px;
  max-height: 37px;
}

#MessageComposeForm a.btn:hover {
  border-color: #b8b8b8;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.startAndEnd {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.add_bulk_questions_table input {
  border-radius: 6px;
  min-height: 40px;
}

.add_bulk_questions_table select {
  height: 40px;
  border-radius: 5px;
}

.add_bulk_questions_table .mark_field {
  min-width: 50px;
}

.add_bulk_questions_table input:not(.mark_field) {
  min-width: 60px;
}

.add_bulk_questions_table th {
  padding: 12px 2px !important;
  text-align: center;
}

.page-body .add_bulk_questions_form {
  width: 100%;
  background: transparent;
}

.add_bulk_questions_form .form-group {
  margin-bottom: 0;
  padding-bottom: 0px;
}

.page-body form input[type=radio], .page-body form input[type=checkbox] {
  min-height: auto;
}

.page-body form input[type=radio] + .padding_checkbox + label, .page-body form input[type=checkbox] + .padding_checkbox + label {
  display: inline-block;
}

#students_scores {
  border: 1px solid #ededed;
}

#students_scores thead th {
  border-bottom: 0;
}

.page-body .select.selectRequired .select-styled {
  border: 1px solid #ff4f5f;
}

.workingDaysList .checkbox, .startingDay .radio {
  display: inline-block;
}

.workingDaysList .checkbox span.text, .startingDay .radio span.text {
  display: none;
}

.workingDaysList input[type=checkbox] ~ .text:before, .startingDay input[type=radio] ~ .text:before {
  display: none;
}

.workingDaysList .dayLabel, .startingDay .dayLabel {
  padding: 6px 10px;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  border-radius: 5px;
  transition: ease 0.2s;
}

.workingDaysList input[type=checkbox]:checked + span + .dayLabel, .startingDay input[type=radio]:checked + span + .dayLabel {
  background: var(--main-color);
  color: #fff;
}

.workingDaysList .checkbox label, .startingDay .radio label {
  margin: 4px 0;
}

.workingDaysList .checkbox, .startingDay .radio {
  margin: 5px 0;
}

.startingDay input[type=radio] {
  opacity: 0;
}

form#search_card_form {
  width: 100%;
  min-width: auto;
}

#search_card_form #card_search_btn {
  margin: 0 auto;
}

#search_card_form .input-form-group::after {
  background: transparent;
}

form#QuestionEditQuestionSettingsForm, .page-body form#QuestionEditQuestionSettingsForm:before {
  background: transparent;
}

.page-body #QuestionEditQuestionSettingsForm .select {
  min-width: 200px;
}

#report_cards_autosearch,
#letter_grades_autosearch,
#transcript_attributes_autosearch,
#analysis_columns_autosearch {
  padding-bottom: 20px !important;
}

.grid__autosearch .jqgrid_search_fields label {
  display: none;
}

@media screen and (max-width: 1630px) and (min-width: 1200px) {
  .page-body .grid__autosearch .select-options {
    width: 66%;
  }
}
.dataTable {
  padding-bottom: 20px;
}

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

.medicalLists {
  overflow: hidden;
}

.table-actions .open > .dropdown-menu {
  max-height: 135px;
  overflow-y: auto;
}

#UsersCertificateChooseCertificantsForm #Parents #users_add_list {
  padding-top: 40px;
  height: auto;
}

#UsersCertificateChooseCertificantsForm #Parents #block_details {
  overflow-y: auto;
  height: 320px;
}

#report_cards_autosearch,
#transcript_attributes_autosearch,
#letter_grades_autosearch,
#analysis_columns_autosearch {
  padding-bottom: 20px !important;
}

#form_profile_pic_upload:before {
  content: none;
}

#form_profile_pic_upload .formMask {
  display: none;
}

.datetimepicker[readonly], .datepicker[readonly], .datetimepicker-start[readonly], .datetimepicker-end[readonly], .handlePickerClear[readonly] {
  cursor: default;
  background: #fff;
}

#concepts-questions-page .form-group {
  padding: 0;
}

.exceptional_class .nav-pills > li > a {
  color: #444;
}

.exceptional_class .nav-pills > li.active > a {
  background-color: var(--main-color) !important;
  color: #fff;
}

.unit_plan_desc .fa-plus-circle {
  color: var(--main-color);
}

.unit_plan_desc {
  background: #f3f3f3;
  padding: 20px;
  border-radius: 7px;
}

.unit_plan_desc #assessments-next {
  margin-top: 15px;
}

.unit_plan_desc .nav-tabs, .unit_plan_desc .nav-tabs.nav-justified > .active > a, .unit_plan_desc .nav-tabs.nav-justified > .active > a:hover {
  background: transparent;
}

.unit_plan_desc .nav-tabs.nav-justified > li > a, .unit_plan_desc .nav-tabs.nav-justified > li > a:before, .unit_plan_desc .nav-tabs.nav-justified > li > a:after {
  background: #fafafa;
}

.unit_plan_desc .nav-tabs.nav-justified > li.active > a:after, .unit_plan_desc .nav-tabs.nav-justified > li.active > a:before {
  background-color: #eee !important;
}

#reflection-evaluation-page .btn {
  margin: 10px 7px;
}

.unit_plan_desc #courses .checkbox {
  padding: 10px;
  border: 1px solid #d5d5d5;
  border-radius: 5px;
}

.unit_plan_desc #courses .checkbox label {
  margin-top: 0;
}

#summative-assessmnet-box .tooltip-inner {
  min-width: 300px;
}

#reactions_element .reaction_status {
  margin: 1px;
}

.rating-form .formMask {
  display: none !important;
}

.rating-form:before {
  background: transparent;
  z-index: -2;
}

.advanced-search .search_fields_container {
  width: 100%;
}

.no-advanced-search .search_fields_container {
  width: 75%;
}

.jqgrid_search_checkbox {
  margin-top: 7px;
}

.table-actions [data-hide-on=false], .table-actions [data-hide-on="0"] {
  display: none !important;
}

@media screen and (max-width: 1150px) {
  .no-advanced-search .search_fields_container {
    width: 100%;
  }
}
#skills_interests td {
  word-break: break-word;
}

.edit_profile_page textarea {
  border-radius: 12px;
}

.grid__autosearch .jqgrid_search_checkbox, .grid__autosearch .jqgrid_search_fields {
  margin: -1px !important;
}

.YDR-Frame-wrapper {
  display: inline-block;
  position: relative;
}

.page-body #form_profile_pic_upload {
  min-width: auto;
  width: 100%;
}

.profile-info-place-birthday .select {
  min-width: 200px;
}

#reactions_element .btn .active, #reactions_element .btn.activated .inactive {
  display: none;
}

#reactions_element .btn.activated .active {
  display: inline-block;
}

#reactions_element button {
  padding: 6px;
}

#add_new_skill img, #add_new_language img, #add_new_interest img {
  margin-top: 10px;
}

#education p, #education h3, #work_experience h3, #work_experience p {
  word-break: break-word;
}

.AttachmentLoading img.loading {
  width: 50px;
}

.upload-ajax-loader {
  width: 40px;
}

.page-body ._invalid .select-styled {
  border: 1px solid #ff4f5f;
  -webkit-animation: inputInvalidFocus 4s alternate linear;
  /* Safari 4+ */
  -moz-animation: inputInvalidFocus 4s alternate linear;
  /* Fx 5+ */
  -o-animation: inputInvalidFocus 4s alternate linear;
  /* Opera 12+ */
  animation: inputInvalidFocus 4s alternate linear;
  /* IE 10+, Fx 29+ */
}

@keyframes inputInvalidFocus {
  0% {
    box-shadow: 0 0 0px 0px #ff4f5f;
  }
  50% {
    box-shadow: 0 0 10px 1px #ff4f5f;
  }
  70% {
    box-shadow: 0 0 0 0px #ff4f5f;
  }
}
.jqgrid_search_fields .select {
  padding: 0 1px;
}

@media screen and (max-width: 880px) {
  .canteenCategories, .category_details {
    width: 100%;
  }
}
.detailsTicketTabs {
  padding: 30px 10px 10px;
  margin-top: 31px;
}

.detailsTicket .tab-content {
  box-shadow: none;
}

.detailsTicketTabs .nav-tabs {
  width: 100%;
}

.detailsTicketTabs .nav-tabs > li.active > a {
  border-top: 0;
  background: var(--main-color);
  color: #fff;
  margin-top: 1px;
}

.detailsTicketTabs .nav-tabs > li {
  width: 50%;
}

.detailsTicketTabs .nav-tabs > li a {
  padding: 20px 15px;
  border-radius: 2px !important;
  font-size: 15px;
  border: 1px solid var(--main-color);
  text-align: center;
}

.detailsTicketTabs .nav-tabs > li > a:hover {
  border-top: 0;
}

.detailsTicketTabs .nav-tabs > li.active > a:hover {
  border-color: var(--main-color);
}

.alert-tickets {
  list-style: none;
  direction: ltr;
  padding: 20px 10px;
}

.ticketPriorityBox {
  border: 1px solid #eee;
  background: #eee;
  border-radius: 25px;
}

.alert-tickets li {
  display: inline-block;
  background: #fff;
  border: 1px solid #d5d5d5;
  margin: 0 5px;
  width: 200px;
  text-align: center;
  padding: 8px;
  position: relative;
  height: 238px;
}

.alert-tickets li i {
  font-style: normal;
  font-weight: bold;
  font-size: 1.2em;
}

.alert-tickets li p {
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-tickets li .ticket-status, .alert-tickets li .ticket-priority {
  display: block;
  margin: 5px;
  padding: 5px;
  background: #d0564f;
  color: #FFF;
  font-size: 1.1em;
  border-radius: 4px;
}

.alert-tickets li .ticket-priority {
  background: #fff;
  color: #777;
  border: 1px solid #ddd;
}

.alert-tickets li .ticket-status.status-1 {
  background: #d0564f;
}

.alert-tickets li .ticket-status.status-2 {
  background: #5cbdd9;
}

.alert-tickets li .ticket-priority.priority-1 {
  border-left: 2px solid #EC407A !important;
}

.alert-tickets li .ticket-priority.priority-2 {
  border-left: 2px solid #FFC400 !important;
}

.alert-tickets li .ticket-priority.priority-3 {
  border-left: 2px solid #A5D6A7 !important;
}

.alert-tickets li .ticket-priority.priority-4 {
  border-left: 2px solid #80D8FF !important;
}

.alert-tickets li date {
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 5px 0;
  display: block;
}

.alert-tickets li a {
  color: #444;
  text-decoration: none !important;
}

.alert-tickets .ticket-reopen {
  margin-bottom: 0;
  border-top: 1px dashed #ccc;
  padding: 5px 0;
}

ul.status-per-developer {
  list-style: none;
  margin-top: 20px;
}

ul.status-per-developer li {
  display: inline-block;
  padding: 3px 5px;
  background: #d0564f;
  color: #FFF;
  border-radius: 3px;
  margin: 3px;
}

ul.status-per-developer li.status-1 {
  background: #d0564f;
}

ul.status-per-developer li.status-2 {
  background: #5cbdd9;
}

ul.status-per-developer li.status-3 {
  background: #FF9800;
}

ul.status-per-developer li.status-4 {
  background: #5db55d;
}

ul.status-per-developer li.status-6 {
  background: #d355ad;
}

.alert-tickets .owl-item {
  text-align: center;
}

.mangmentReportCanvas, .mangmentReportCanvasPercentages {
  background: #fff;
  max-height: 700px;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
}

.mangmentReportCanvas canvas, .mangmentReportCanvasPercentages canvas {
  padding: 26px;
}

#modal_experience_form .widget {
  box-shadow: none;
}

#PostReplyForm {
  width: 100%;
  padding: 30px;
}

.supportFilters {
  margin: 20px 0;
}

.supportFilters #btnsFilterByStatus {
  display: inline-block;
}

.alert-tickets .item.__loading {
  opacity: 0.1;
  transform: translateX(40px);
  -webkit-transform: translateX(40px);
}

.filter-menu .btn {
  position: relative;
  margin-right: 6px;
  color: var(--main-color);
  text-decoration: none;
  border: 1px solid #ccc;
  padding: 4px 15px;
  border-radius: 50px;
  background: #fff;
  border-color: var(--main-color);
}

.filter-menu .btn.active:before {
  content: "\f0d8";
  font-family: FontAwesome;
  position: absolute;
  left: 50%;
  font-size: 27px;
  transform: translateX(-50%);
  top: calc(100% - 1px);
  color: #eee;
}

.filter-menu .btn.active {
  color: #ffffff;
  background: var(--main-color);
  border-color: var(--main-color);
  box-shadow: none;
}

.supportFilters .select {
  display: inline-block;
  width: auto;
  min-width: 200px;
  min-height: 20px;
}

.supportFilters .select-styled {
  min-height: 36px;
  padding-top: 10px;
}

.supportFiltersHeader {
  background-color: #fff !important;
  border-color: #eee !important;
}

@media screen and (max-width: 1149px) {
  .filter-menu .btn.active:before {
    display: none;
  }
}
.filterNoResult {
  display: none;
  text-align: center;
  color: #777;
  padding-top: 35px;
}

.noResultsFound .owl-controls {
  display: none;
}

.noResultsFound .filterNoResult {
  display: block;
}

.alert-tickets .developerImage {
  width: 38px !important;
  height: 38px;
  border-radius: 50%;
  margin: 0 auto 6px;
}

.grid__autosearch .chosen-container .chosen-results {
  width: 100%;
  display: block;
  max-height: 80px;
}

.grid__autosearch .chosen-container .chosen-search {
  float: none;
}

.ticketPriorityBox .count {
  text-align: center;
  margin-bottom: 20px;
  color: #777;
  font-size: 18px;
  display: none;
}

.ticketInfoSelectBox {
  margin-top: 14px;
}

#status_button:after {
  content: "";
  background: #c11818;
  font-size: 1.5em;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #c11818;
  margin: 0 3px;
  transition: all 0.2s ease-in-out;
}

#status_button.active:after {
  background: #94a900;
  border: 1px solid #94a900;
}

.canteenCategories .category .imgBox {
  height: 120px;
  width: 100%;
  overflow: hidden;
}

.oldCategoryImg {
  margin-top: 20px;
  overflow: hidden;
}

.oldCategoryImg img {
  border-radius: 10px;
  object-fit: contain;
  max-height: 150px;
}

.allowThemeEdit .control-label {
  font-size: 16px;
  font-weight: bold;
}

.shareIdeaLabel {
  color: #444;
  width: 580px;
  font-size: 14px;
  max-width: 100%;
}

.edit_profile_page [type=reset], .btn[type=reset], .btn-default[type=reset] {
  color: #444;
  background: #ccc !important;
}

.royal_portfolio_box {
  background: #f3f3f3;
  border-radius: 5px;
  padding: 15px;
}

.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}

#online_users .checkbox input {
  width: 18px;
}

.teacher_statistics_box {
  padding: 35px;
}

.persona_dialog {
  display: none;
  direction: rtl;
  background-color: #fff;
  padding: 20px;
}

[aria-describedby=persona_dialog] .ui-dialog-titlebar-close {
  float: left;
  background: transparent;
  border: 0;
  top: 15px;
  position: relative;
  left: 3px;
  color: var(--main-color);
}
[aria-describedby=persona_dialog] .ui-dialog-titlebar-close:before {
  content: "\f00d";
  font-family: FontAwesome;
  font-size: 22px;
}

#EportfolioEportfolioEditForm + .absolute_form_side_panel {
  position: relative;
  right: auto;
  left: auto;
  top: auto;
  margin: 0 auto;
}

#online_users .tickets-container {
  background-color: #fff;
}

.employee-main-block.boxgrid {
  background-color: #fff;
}
.employee-main-block.boxgrid .inner .slided {
  background: #848282 !important;
}
.employee-main-block.boxgrid .msg {
  padding-top: 10px;
}

.main_bg {
  background: #fafafa;
}

#SchoolsTable .chosen-container {
  width: 100% !important;
}

#tree .tree_actions button {
  padding: 5px 7px;
  background: #fff;
}

.evaluators_searchable input[type=checkbox], input[type=checkbox].select_all_evaluators, input[type=checkbox]#show_tsupv_his_teachers {
  width: 22px !important;
  display: inline-block;
  padding: 0 !important;
}

.public_courses_wrapper {
  background: #fff;
  border: 1px #e9e9e9 solid;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
}

.list-group-item {
  background: #fff;
}

.well.white-bg {
  background: #fff;
}

#dashboard .chart_container g rect {
  fill: #ddd;
}

body > .silverKTV {
  max-width: 200px;
}

.all_stu_label_announc {
  border-top: 1px solid #ddd;
  margin-left: 0px;
  width: 100%;
}

.float-right {
  float: left;
}

.float-left {
  float: right;
}

.chosen-container-single .chosen-search input[type=text] {
  padding-right: 30px;
  background: url("../chosen-sprite.png") no-repeat 100% -23px;
  background-size: 60px !important;
}

.chosen-container-active.chosen-with-drop .chosen-single {
  border-radius: 25px !important;
  box-shadow: none;
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
  animation: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

#AttachmentUploadForm .chosen-container-multi .chosen-choices li.search-field input[type=text] {
  width: 0 !important;
}

.roles-menu li a, .semesters-menu li a, .lti-courses-menu li a {
  white-space: pre-line;
  padding-left: 24px;
}

button.semesters_toggle, button.roles_toggle {
  text-overflow: ellipsis;
  overflow: hidden;
}

.jstree-wrapper .jstree-default .jstree-clicked {
  background: #eee !important;
}

@media screen and (max-width: 956px) {
  #walkthrough_button_div, .hopscotch-bubble {
    display: none !important;
  }
}
#UserWelcomingMessage {
  width: 23px;
  height: 18px;
}

#PostTeacherEditForm .step-1, #PostTeacherEditForm .step-2, #PostTeacherAddForm .step-1, #PostTeacherAddForm .step-2 {
  display: none;
}
#PostTeacherEditForm.step-1 .step-1, #PostTeacherAddForm.step-1 .step-1 {
  display: block;
}
#PostTeacherEditForm.step-2 .step-2, #PostTeacherAddForm.step-2 .step-2 {
  display: block;
}

.change_default_school_div .checkbox, .change_default_school_div label {
  display: inline-block;
}
.change_default_school_div .checkbox label, .change_default_school_div label label {
  height: 31px;
}
.change_default_school_div .float_inverse {
  display: none !important;
}

.fc-day-grid-event .fc-content {
  background: #fff;
  color: #444;
  padding: 6px;
}

.widget.separated .search_online_list {
  padding: 10px;
  width: 100%;
  margin: 0 auto;
  display: block;
}

.announcement_page {
  display: none !important;
}
.announcement_page.active, .announcement_page.show {
  display: inline !important;
}

table.dataTable .rating-form:before {
  background: transparent !important;
}

#UserSchadminAddForm #select-students #student_to_count .input .input {
  width: 100%;
  padding: 0 15px 10px;
}
#UserSchadminAddForm .schoolSelectedMessageError {
  color: #e5301c;
  padding: 5px 0;
  display: none;
}

.discussion-tiles .noResults {
  text-align: center;
  color: #777;
}

iframe#sn_va_web_client {
  border: 0;
}

.contests-riegister-wrapper .card {
  will-change: transform;
  margin-top: 8px;
  margin-left: 8px;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  background-color: #fafafa;
  height: 35%;
  display: inline-block;
  -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
.contests-riegister-wrapper .card:hover {
  cursor: pointer;
}
.contests-riegister-wrapper .card__image {
  position: absolute;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repat;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  opacity: 0;
  -webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.contests-riegister-wrapper .card__image:after {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  top: 0;
  left: 0;
  right: 0;
  -webkit-transition: all 500ms;
  transition: all 500ms;
  bottom: 0;
}
.contests-riegister-wrapper .card__title {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 18px;
  color: #FFF;
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 16px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
  text-shadow: 2px 2px 1px #000;
}
.contests-riegister-wrapper .card__subtitle {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 14px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #000;
  left: 88px;
  right: 0;
  top: 45px;
  position: absolute;
  padding: 0 16px;
  opacity: 0;
  -webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.contests-riegister-wrapper .card__text {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 14px;
  display: block;
  left: 0;
  right: 0;
  top: 100px;
  padding: 16px;
  margin: 0;
  line-height: 1.6;
  position: absolute;
  color: #444;
  overflow: hidden;
  -webkit-transition: width 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: width 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition: delay 0.1s;
  transition: delay 0.1s;
  max-height: 200px;
  overflow-y: auto;
}
.contests-riegister-wrapper .card__action-bar {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  padding: 0 8px;
  border-top: 1px solid #aeaeae;
  boz-sizing: border-box;
  height: 52px;
  -webkit-transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.contests-riegister-wrapper .card__button {
  border: none;
  background: transparent;
  outline: none;
  position: relative;
  display: inline-block;
  line-height: 52px;
  padding: 0 16px;
  color: #e5301c;
}
.contests-riegister-wrapper .card--big {
  -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.15);
  height: 430px;
  min-height: 324px;
}
.contests-riegister-wrapper .card--big .card__image {
  border-radius: 1px 1px 0 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 1;
  max-height: 176px;
}
.contests-riegister-wrapper .card--big .card__title {
  top: 135px;
}
.contests-riegister-wrapper .card--big .card__text {
  top: 176px;
}
.contests-riegister-wrapper .card--big .card__action-bar {
  left: 0;
}
.contests-riegister-wrapper span.databox-number.date-style {
  color: #097c8c;
  display: block;
}
.contests-riegister-wrapper .modal-body img {
  max-width: 100%;
}

#registration_approval_table_wrapper table thead th #statusName {
  height: 27px;
  min-height: auto;
  padding: 0;
  min-width: 93px;
  border-radius: 3px;
}
#registration_approval_table_wrapper table thead th input:not([type=checkbox]) {
  min-height: 27px;
  border-radius: 3px;
}

.guardians_of_stu_selected {
  padding: 15px;
  background: #fff;
  margin: 15px auto;
}

.error_boo .error_loader {
  background: #fafafa !important;
}

.wideTableContainer .select {
  color: #444;
}

.sum_level, .total_append {
  background-color: #eee !important;
}

.total_append {
  background-color: #ddd !important;
}

#CourseScientificFieldId_chosen {
  width: 100% !important;
}

.absolute_form_side_panel_eportfolio {
  width: 67%;
  margin: 10px auto;
  min-width: 300px;
}
.absolute_form_side_panel_eportfolio .upload_attachment_wrapper {
  text-align: right !important;
  background-color: transparent;
  border: 1px solid var(--main-color);
}
.absolute_form_side_panel_eportfolio #add_attachment {
  width: 100%;
  background: var(--main-color);
  color: #fff;
}
.absolute_form_side_panel_eportfolio form {
  width: 100%;
}

#AbsenceAbsencesDetailedReportForm .validationDateError {
  color: #e5301c;
  text-align: center;
  display: none;
}

.grades_labels_colors_wrapper span {
  color: #444;
}

.createNewBranchForm #country_id_chosen, .successPartners.index #country_id_chosen {
  width: 100% !important;
}

.successPartners.index .control-label {
  color: #444;
}

.guardian_info_table_wrapper {
  margin: 0 auto;
  float: none;
  background: #fff;
  border-radius: 25px;
  padding-bottom: 25px;
}

.registration_details_wrapper {
  text-align: center;
}

#competitionModal .modal-dialog, #competitionModalOld .modal-dialog {
  /*width: 1500px;*/
  max-width: 99%;
  max-height: calc(100vh - 20px);
  /*top: 0;*/
}
@media screen and (max-width: 1516px) {
  #competitionModal .modal-dialog, #competitionModalOld .modal-dialog {
    margin: 5px auto;
  }
}
#competitionModal .modal-footer, #competitionModalOld .modal-footer {
  text-align: right;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  /*background:$sidemenu_bg;*/
}
#competitionModal .modal-footer .btn, #competitionModalOld .modal-footer .btn {
  margin: 5px;
}
#competitionModal .modal-title, #competitionModal .competitionDesc, #competitionModalOld .modal-title, #competitionModalOld .competitionDesc {
  text-align: right;
}
#competitionModal .competitionImg, #competitionModalOld .competitionImg {
  text-align: center;
}
#competitionModal .competitionImg img, #competitionModalOld .competitionImg img {
  max-width: 100% !important;
  object-fit: contain;
  max-height: calc(100vh - 162px);
  border-radius: 7px;
  border: 1px solid #eee;
  margin-top: 5px;
  height: 1000px;
  /* @media screen and (min-width: 1025px){
       max-width: 49% !important;
   }*/
}
@media screen and (min-width: 1025px) {
  #competitionModal .competitionImg.program_training_img img, #competitionModalOld .competitionImg.program_training_img img {
    max-width: 49% !important;
  }
}

#schools-picker, #schools-teachers-picker {
  margin-bottom: 20px;
}
#schools-picker .checkbox label input, #schools-teachers-picker .checkbox label input {
  margin-left: 15px;
}
#schools-picker .checkbox label .padding_checkbox, #schools-teachers-picker .checkbox label .padding_checkbox {
  padding: 0 !important;
}

.upload_files_div input[type=radio] {
  padding: 0 5px !important;
}

.allowedToIosDevicesMessage {
  text-align: center;
  font-size: 14px;
  color: #e5301c;
}

.viewInBooksBtn {
  text-align: center;
  margin: 0 auto;
  display: block;
  width: 200px;
  padding: 10px 20px;
  border-radius: 25px;
  -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
}

.view-scorm-btn {
  font-size: 17px !important;
  min-width: 200px;
  width: 50%;
  margin: 10px auto 0 !important;
  display: block !important;
  float: none !important;
  height: 45px !important;
}
.view-scorm-btn i {
  font-size: 17px !important;
  margin: auto 15px;
}

.scorm-notice-msg {
  font-size: 14px;
  max-width: 95%;
}

.scorm-wrapper {
  display: block !important;
}
.scorm-wrapper .actions, .scorm-wrapper .btn-group {
  display: block !important;
}

form .nav-tabs.nav-justified {
  background: transparent;
}

#translationsSectionDiv .without_brightnes {
  filter: brightness(1.25) !important;
  width: 60px;
}

.panel-primary > .panel-heading {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.panel-primary {
  border-color: var(--main-color);
}

#translationsSection {
  max-height: 500px;
  overflow-y: auto;
}
#translationsSection > div {
  margin: 5px 0;
}
#translationsSection::-webkit-scrollbar {
  background-color: transparent;
  border-radius: 10px;
  width: 8px;
}
#translationsSection::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.55);
  border-radius: 5px;
}

#translationsSectionDiv .panel-footer {
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.stu_search_box #stu_search_input {
  margin: 12px auto;
  width: 98% !important;
}
.stu_search_box .noResult {
  color: #e5301c !important;
  display: none;
}

table.dataTable tfoot th, table.dataTable tfoot td {
  border-top: 1px solid #eee !important;
}

#report-table.table thead tr, .style_report_qatar.table thead tr {
  background-color: unset;
}

#report-table.table-striped > tbody > tr:nth-of-type(odd), .style_report_qatar.table-striped > tbody > tr:nth-of-type(odd) {
  background: unset;
}

#report-table.table tfoot > tr > th, .style_report_qatar.table tfoot > tr > td, .style_report_qatar.table .total_append > td {
  font-weight: 600;
  font-size: 17px;
}

.weekly_report {
  border-top: 1px solid #eee !important;
}

#students_scores .searchFeild {
  width: 100%;
  height: 30px;
  padding: 5px;
}

#students_scores {
  padding-bottom: 0;
}
#students_scores td:not(:last-child), #students_scores th:not(:last-child) {
  border-left: 1px solid #eee;
}

.school-location-box .chosen-container.chosen-with-drop .chosen-drop {
  margin-top: 0px;
  width: 90%;
}

.attachment_details_wrapper .bweb_attach_link {
  font-size: 1.1em;
  max-width: 85%;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  color: #fff;
}

#add_automate_form #cbsync label {
  max-width: calc(100% - 34px);
}
@media screen and (min-width: 991px) {
  #add_automate_form .stages_row .addButton {
    margin: 0;
    margin-top: 40px;
  }
  #add_automate_form #stageNums {
    margin-top: 40px;
  }
}

#students_well.well {
  padding: 0;
}

.teacher_day_logo {
  height: 60px;
  margin-top: 4px;
  margin-right: 10px;
  border-radius: 10px;
}
@media screen and (max-width: 991px) {
  .teacher_day_logo {
    height: 45px;
  }
}
@media screen and (max-width: 750px) {
  .teacher_day_logo {
    display: none;
  }
}

#study_plan.table-bordered > tbody > tr > td, #study_plan.table-bordered > tbody > tr > th, #study_plan.table-bordered > tfoot > tr > td, #study_plan.table-bordered > tfoot > tr > th, #study_plan.table-bordered > thead > tr > td, #study_plan.table-bordered > thead > tr > th {
  border-color: #d5d5d5;
}

.add_bulk_questions_table select {
  min-height: 40px;
  padding: 0 3px;
}

.teacher_result_analysis_chart_area svg g g path, .teacher_result_analysis_chart_area svg > rect {
  fill: #fff;
}

.exam-chain-wrapper {
  box-shadow: none !important;
}
.exam-chain-wrapper .exam-chain-header {
  width: 100%;
  position: relative;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  /*  &:before{
        content:'';
        width: 70px;
        height:3px;
        left: 50%;
        transform: translateX(-50%);
        background: $primary;
        position: absolute;
        background: linear-gradient(90deg, #5B86E5 0%, $primary 100%);
        bottom: -15px;
    }*/
}
.exam-chain-wrapper .go-to-home {
  width: 100%;
  text-align: center;
  color: var(--main-color);
  font-size: 19px;
  margin-top: 50px;
}
.exam-chain-wrapper .go-to-home i {
  margin: 0 10px;
  font-size: 28px;
  display: inline-block;
  vertical-align: sub;
}
.exam-chain-wrapper .go-to-home a {
  display: flex;
  max-width: 300px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  border-radius: 25px;
}
.exam-chain-wrapper .exam-chain-btn {
  position: absolute !important;
  margin: 0 !important;
  left: 50%;
  bottom: 15px;
  min-width: 70%;
  transform: translateX(-50%);
  border-radius: 25px !important;
  height: 42px;
  padding-top: 11px !important;
  font-size: 17px;
}
.exam-chain-wrapper .exam-chain-btn.bg-success {
  background-color: #66BB6A !important;
}
.exam-chain-wrapper .exam-chain-btn.disabled {
  pointer-events: none;
  background: #ddd !important;
}
.exam-chain-wrapper .exam-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 67px;
}
.exam-chain-wrapper .pricing-container {
  display: flex;
  flex-wrap: wrap;
}
.exam-chain-wrapper .pricing-container [class*=col-] {
  padding: 10px 10px;
  flex: 1;
  min-width: 300px;
}
@media screen and (max-width: 500px) {
  .exam-chain-wrapper .pricing-container [class*=col-] {
    min-width: 225px;
    width: 100%;
  }
}
.exam-chain-wrapper img.center_image {
  max-width: 60%;
  margin-right: 20%;
  margin-left: 20%;
  margin-top: 5px;
}
.exam-chain-wrapper .pricing-container .plan ul {
  min-height: 200px !important;
}
.exam-chain-wrapper .collapse-icon {
  display: none !important;
}
.exam-chain-wrapper .pricing-container .plan {
  min-height: 300px;
  background: #fff;
  margin: 0;
  position: relative;
  padding-bottom: 60px;
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  flex-flow: column;
  justify-content: space-around;
  color: #444;
}
.exam-chain-wrapper .pricing-container .plan ul {
  margin: 20px 0;
  padding: 0;
  list-style: none;
  overflow: scroll !important;
}
.exam-chain-wrapper .time-remeaing {
  border-top: 1px solid #fafafa;
  padding-top: 5px;
  margin: 5px 0;
  background: #ddd;
  min-height: 125px;
  direction: ltr;
}
.exam-chain-wrapper .time-remeaing h2 {
  margin-top: 10px;
}
.exam-chain-wrapper .time-remeaing p {
  opacity: 0.7;
}
.exam-chain-wrapper .time-remeaing span {
  display: inline-block;
  margin: 0 5px;
}
.exam-chain-wrapper .time-remeaing span p {
  font-size: 12px;
}
.exam-chain-wrapper .course-title {
  opacity: 0.7;
}
.exam-chain-wrapper .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(/img/memphis-style.png);
  background-position: center;
  filter: brightness(0.5);
  opacity: 0.02;
}
.exam-chain-wrapper .exam-box:nth-child(2) .mask {
  background-position: center !important;
}
.exam-chain-wrapper .exam-box:nth-child(6n+1) .mask {
  background-position: top !important;
}
.exam-chain-wrapper .exam-box:nth-child(6n+2) .mask {
  background-position: center !important;
}
.exam-chain-wrapper .exam-box:nth-child(6n+3) .mask {
  background-position: left 73% !important;
}
.exam-chain-wrapper .exam-box:nth-child(6n+4) .mask {
  background-position: -15% 4% !important;
}
.exam-chain-wrapper .exam-box:nth-child(6n+5) .mask {
  background-position: 100% 59% !important;
}
.exam-chain-wrapper .publish-cutoff-date {
  display: flex;
  align-items: baseline;
  background: #fafafa;
}
.exam-chain-wrapper .publish-cutoff-date:nth-child(even) {
  background: #fff;
}
.exam-chain-wrapper .publish-cutoff-date p {
  text-align: right;
  width: 50%;
  display: inline-block;
  vertical-align: middle;
  padding-right: 17px;
}
.exam-chain-wrapper .publish-cutoff-date h4 {
  text-align: right;
  width: 50%;
  display: inline-block;
}
.exam-chain-wrapper #PopupAnnouncementsAddForm .numberOfImages label, .exam-chain-wrapper #PopupAnnouncementsAddForm .publish_to label, .exam-chain-wrapper #PopupAnnouncementsEditForm .numberOfImages label, .exam-chain-wrapper #PopupAnnouncementsEditForm .publish_to label {
  margin-left: 20px;
  margin-right: 0;
  vertical-align: -webkit-baseline-middle;
}
.exam-chain-wrapper #PopupAnnouncementsAddForm .image_group, .exam-chain-wrapper #PopupAnnouncementsEditForm .image_group {
  border-top: 2px dotted #ddd;
}
.exam-chain-wrapper #PopupAnnouncementsAddForm .image_group h3, .exam-chain-wrapper #PopupAnnouncementsEditForm .image_group h3 {
  text-align: center;
}

#competitionModal {
  /* Slideshow container */
  /* Next & previous buttons */
  /* Position the "next button" to the right */
  /* On hover, add a black background color with a little bit see-through */
  /* The dots/bullets/indicators */
  /* Fading animation */
}
#competitionModal .imgSlide {
  display: none;
}
#competitionModal .popupAnnouncementsImg {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
#competitionModal .popupAnnouncementsImg img {
  max-width: 100% !important;
  object-fit: contain;
  max-height: calc(100vh - 162px);
  border-radius: 7px;
  margin: 0 auto;
  margin-top: 5px;
  height: 400px;
  display: block;
}
#competitionModal .prev, #competitionModal .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 1px;
  margin-top: -22px;
  color: var(--main-color);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: none;
  text-align: center;
  direction: ltr;
}
#competitionModal .next {
  right: 0;
}
#competitionModal .prev {
  float: none !important;
  left: 0;
}
#competitionModal .prev:hover, #competitionModal .next:hover {
  background-color: rgba(var(--main-color-rgb), 90%);
  color: #fff;
}
#competitionModal .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
#competitionModal .dotsBox {
  text-align: center;
  display: none;
  margin-top: 10px;
}
#competitionModal .active, #competitionModal .dot:hover {
  background-color: #717171;
}
#competitionModal .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
#competitionModal.popupWithSlider .imgSlide {
  display: none;
}
#competitionModal.popupWithSlider .dotsBox, #competitionModal.popupWithSlider .next, #competitionModal.popupWithSlider .prev {
  display: block;
}
@media only screen and (max-width: 300px) {
  #competitionModal.popupWithSlider .prev, #competitionModal.popupWithSlider .next, #competitionModal.popupWithSlider .text {
    font-size: 11px;
  }
}
#competitionModal.popupWithoutSlider .imgSlide {
  display: block;
}
@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

.wizenoze-materials-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.wizenoze-materials-wrapper .material-header {
  height: 250px;
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: #eee;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.wizenoze-materials-wrapper .material-header img {
  max-width: 100%;
  width: 120px;
  flex: 1;
  margin: 0 auto;
  max-height: 100%;
  object-fit: contain;
}
.wizenoze-materials-wrapper .material-body {
  padding: 20px 15px 10px;
  position: relative;
}
.wizenoze-materials-wrapper .material-body a {
  cursor: pointer;
}
.wizenoze-materials-wrapper .material-body .list-childs {
  padding: 25px 15px 10px;
}
.wizenoze-materials-wrapper .body-title {
  display: none;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #ddd;
  width: calc(100% + 30px);
  transform: translateX(-15px);
  padding-bottom: 10px;
  top: -10px;
  margin-bottom: 25px;
}
.wizenoze-materials-wrapper .material-box {
  background: #fff;
  border-radius: 7px;
  width: 23%;
  margin: 10px;
  min-width: 330px;
  height: 350px;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  border: 1px solid #eee;
}
@media screen and (max-width: 816px) {
  .wizenoze-materials-wrapper .material-box {
    width: 100%;
  }
}
.wizenoze-materials-wrapper .material-box .open-list, .wizenoze-materials-wrapper .material-box .close-list, .wizenoze-materials-wrapper .material-box .share {
  color: var(--main-color);
  border: 1px solid;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  font-size: 20px;
  top: -15px;
  right: 15px;
  background: #fff;
  cursor: pointer;
  position: absolute;
}
.wizenoze-materials-wrapper .material-box .close-list {
  color: #aeaeae;
  top: unset;
  bottom: -15px;
}
.wizenoze-materials-wrapper .material-box.opened-list .body-title {
  display: block;
}
.wizenoze-materials-wrapper .material-box.opened-list .material-body {
  height: 100%;
}
.wizenoze-materials-wrapper .material-box.opened-list .material-header {
  height: 0;
  display: none;
}
.wizenoze-materials-wrapper .material-box.opened-list .open-list {
  display: none;
}

.successpartners_coming_soon img {
  width: calc(100% - 12px);
  max-width: 600px;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 25px;
}

.darkThemeWrapperHtml .successpartners_coming_soon img {
  background: #d0d0d0;
}

.gpa_report_row {
  background-color: #fff;
  border: 1px #eee solid;
  border-radius: 10px;
  text-align: center;
  margin: 0;
  padding: 30px;
  font-size: 1em;
  color: #66BB6A;
}

#WiredWizardstepsForm {
  padding: 0 !important;
}

#comments-loading img {
  width: 100px;
  display: block;
  margin: 10px auto;
}

#content_wrapper .alert span {
  font-weight: 300;
}

#score a {
  font-weight: 400 !important;
  color: #fff !important;
}

.profile-stats #scoreBar #score a, .profile-stats #scoreBar #label {
  color: #444 !important;
}

#content_wrapper {
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  padding: 15px;
}
#content_wrapper .tab-content {
  background: transparent;
}

.page-breadcrumbs .wlc-back {
  color: #fff;
}
.page-breadcrumbs .wlc-back a {
  color: #fff;
}

.maint_notice_wrapper {
  margin: 0 -25px;
  padding: 15px 35px;
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}
.maint_notice_wrapper a {
  color: #fff;
  font-weight: bold;
}
.maint_notice_wrapper #maint_notice_carousel {
  text-align: center;
}
.maint_notice_wrapper #maint_notice_carousel.owl-loaded {
  display: flex;
  align-items: center;
  justify-content: center;
}
.maint_notice_wrapper #maint_notice_carousel .owl-dots {
  display: inline-flex;
  margin: 0 15px;
}
.maint_notice_wrapper #maint_notice_carousel .owl-stage-outer .owl-stage {
  display: flex;
  align-items: center;
}
.maint_notice_wrapper #maint_notice_carousel button.owl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin: 0 3px;
  background: #fff;
  opacity: 0.4;
}
.maint_notice_wrapper #maint_notice_carousel button.owl-dot span {
  display: none;
}
.maint_notice_wrapper #maint_notice_carousel button.owl-dot.active {
  opacity: 1;
}
.maint_notice_wrapper #maint_notice_carousel .notice_msg {
  padding: 0 12%;
}
@media (max-width: 950px) {
  .maint_notice_wrapper #maint_notice_carousel .notice_msg {
    padding: 0 15%;
    padding-right: 0;
    text-align: right;
  }
}
.maint_notice_wrapper #maint_notice_carousel .notice_msg i {
  margin-left: 10px;
  font-size: 20px;
  color: #f7ca0e;
  font-weight: bold;
}
.maint_notice_wrapper #maint_notice_carousel .notice_msg img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
}
.maint_notice_wrapper #maint_notice_carousel .notice_msg strong {
  margin-left: 5px;
}
.maint_notice_wrapper .alert {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px !important;
  border: 0;
  line-height: 1.4;
  margin: 0;
  border-radius: 8px;
  padding: 12px;
  font-weight: 300;
  margin-bottom: 4px;
  /* &.alert-warning{
       position: relative;
       padding-right: 40px;
       &:before{
           content: '\f05a';
           font-family: FontAwesome;
           position: absolute;
           right: 12px;
           font-size: 20px;
           top:  10px;
           color: $warning;
       } 
   }*/
}
.maint_notice_wrapper .alert a {
  color: #fff;
}
.maint_notice_wrapper .alert a:hover, .maint_notice_wrapper .alert a:focus {
  color: #fff;
}

.breadcrumbs-links {
  padding: 0 4px;
}

.breadcrumbs-links .breadcrumb {
  width: 98%;
}

.breadcrumbs-links .breadcrumb li:last-child {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  margin-bottom: -0.5em;
}

.link-tabs .tab-link.link-active {
  color: #fff;
  background: var(--main-color);
}

.semesters-group > .btn:first-child, .roles-group > .btn:first-child, .lti-course-group > .btn:first-child {
  border-color: var(--main-color);
  color: var(--main-color);
}
.semesters-group > .btn:first-child:hover, .semesters-group > .btn:first-child:focus, .roles-group > .btn:first-child:hover, .roles-group > .btn:first-child:focus, .lti-course-group > .btn:first-child:hover, .lti-course-group > .btn:first-child:focus {
  color: var(--main-color);
  background: rgba(var(--main-color-rgb), 0.1);
}
.semesters-group > .btn:first-child .caret, .roles-group > .btn:first-child .caret, .lti-course-group > .btn:first-child .caret {
  border-top-color: var(--main-color);
}

.main-article-content, #CommentSection {
  padding: 5px 20px;
}

.browseContent_course_title {
  color: var(--dark-blue-color);
}

.courses_library_wrapper .tall_box .inner .details .msg {
  padding-top: 150px;
}

.browse-library-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.wideTableContainer {
  width: 100%;
  overflow-x: auto;
}

#registration_approvalForm .chosen-container {
  max-width: 100%;
}

.form-group .chosen-container, #report_selection .chosen-container, #dashboard .chosen-container {
  max-width: 100%;
}

.scan-wlc-msg {
  color: #fff;
  padding: 7px;
  border-radius: 7px;
  font-weight: 500;
  font-size: 15px;
}

.ManagersSupervisor_index_wrapper .boxgrid {
  box-shadow: none !important;
  position: relative;
}
.ManagersSupervisor_index_wrapper .boxgrid .title_cover {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 160px;
}

.employee-index-wrapper .title_cover {
  top: 150px !important;
}

.survey_evaluatees_modal .form-group, .survey_evaluatees_modal .form-actions {
  padding: 10px 20px;
}

.book-no-result {
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  padding: 7px;
  border-radius: 7px;
  font-size: 15px;
  text-align: center;
}

.depositDepositWrapper #depositTransfer {
  margin-right: 15px;
}
.depositDepositWrapper .padding_checkbox {
  padding: 2px;
}

.browseContent_course_title {
  background: #fff;
  border-radius: 5px;
  padding: 15px;
  margin: 10px 20px;
}

.full_schedule_wide_tabel_wrapper .others {
  display: none;
  min-height: 700px;
  padding: 0;
}
.full_schedule_wide_tabel_wrapper .others .others-container {
  padding-right: 10px;
}
.full_schedule_wide_tabel_wrapper .others .schedule-table {
  border: 1px solid #eee;
  background: rgba(var(--main-color-rgb), 0.1);
  padding: 10px 0 15px;
  border-radius: 3px;
}
.full_schedule_wide_tabel_wrapper .others h3 {
  text-align: center;
  border-bottom: 1px solid #ddd;
}
.full_schedule_wide_tabel_wrapper .others.startOthers {
  display: block;
}
.full_schedule_wide_tabel_wrapper .others table {
  min-height: 600px;
  width: 100%;
}
.full_schedule_wide_tabel_wrapper .others .wrapperTable {
  max-height: 600px;
  overflow-y: auto;
  margin-bottom: 10px;
}
.full_schedule_wide_tabel_wrapper .others button {
  width: 94%;
  padding: 8px;
  border-radius: 3px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border: 0;
  display: block;
  margin: 0 auto;
}
.full_schedule_wide_tabel_wrapper .others table, .full_schedule_wide_tabel_wrapper .others table tbody {
  vertical-align: top;
}
.full_schedule_wide_tabel_wrapper .cant_sortable td {
  pointer-events: none;
}
.full_schedule_wide_tabel_wrapper .schedule-table_wrapper.col-md-10 {
  border: 1px solid #eee;
  border-radius: 3px;
}
@media (min-width: 992px) {
  .full_schedule_wide_tabel_wrapper .schedule-table.startDragable.col-md-10 {
    width: 83.3333333%;
  }
  .full_schedule_wide_tabel_wrapper .schedule-table.others {
    width: 16.66666667%;
  }
}
.full_schedule_wide_tabel_wrapper.in-drag-state .schedule-table tr td {
  max-width: 200px;
  min-width: unset;
}
.full_schedule_wide_tabel_wrapper.in-drag-state .schedule-table_wrapper {
  overflow-x: unset !important;
}

.tsupv-index-box {
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  padding: 15px;
}
.tsupv-index-box.tsupv-actions-and-serach-wrapper {
  margin-bottom: 10px;
}
.tsupv-index-box .card-header {
  display: flex;
  justify-content: space-between;
}
.tsupv-index-box .card-header .teacher-info a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.tsupv-index-box .card-header .expanded-btn-wrapper button {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
}
.tsupv-index-box .card-header .expanded-btn-wrapper button i {
  display: none;
  margin: 0 !important;
  font-size: 1.6em;
  font-weight: bold;
}
.tsupv-index-box .card-header .expanded-btn-wrapper button[aria-expanded=true] .fa-angle-down {
  display: block;
}
.tsupv-index-box .card-header .expanded-btn-wrapper button[aria-expanded=false] .fa-angle-up {
  display: block;
}

.attendees-wrapper {
  display: inline-block;
}
.attendees-wrapper .attendee-box {
  display: inline-block;
  margin-bottom: 10px;
  margin-left: 30px;
  min-width: 100px;
}
.attendees-wrapper .attendee-box .input-tooltip-wrapper {
  display: block;
  padding-left: 15px;
}
.attendees-wrapper .attendee-box .input-tooltip-wrapper .wrapper {
  top: -10px;
  left: 10px;
}

#appointment_schedule #days_wrapper {
  display: flex;
  flex-wrap: wrap;
}
#appointment_schedule .appointment_day {
  min-width: 100px;
  margin: 7px;
  border-radius: 15px;
  border: 1px solid #ddd;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
#appointment_schedule .appointment_day p {
  margin: 0;
  padding: 3px 10px;
}
#appointment_schedule .appointment_day p.day {
  padding: 5px 10px;
}
#appointment_schedule .appointment_day p.day_name {
  background: var(--main-color);
  color: #fff;
}
#appointment_schedule .appointment_day.active {
  background: var(--main-color);
  color: #fff;
}
#appointment_schedule #timeslots .list {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}
#appointment_schedule #timeslots .list li {
  cursor: pointer;
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 5px;
  margin: 3px 8px;
  font-size: 14px;
}

.timeslot_type.online {
  color: #51ddf7;
  border-color: #51ddf7 !important;
}
.timeslot_type.online.active {
  color: #fff;
  background: #51ddf7;
}
.timeslot_type.inperson {
  color: #a0a0ec;
  border-color: #a0a0ec !important;
}
.timeslot_type.inperson.active {
  color: #fff;
  background: #a0a0ec;
}

.timeslots_colors_note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.timeslots_colors_note span {
  margin: 5px 10px;
  display: inline-flex;
  align-items: center;
}
.timeslots_colors_note .timeslot_labels {
  width: 30px;
  height: 12px;
  margin-left: 5px;
}
.timeslots_colors_note .timeslot_labels.online {
  background: #51ddf7;
}
.timeslots_colors_note .timeslot_labels.inperson {
  background: #a0a0ec;
}

#calendar .fc-time-grid .fc-slats td {
  height: 2.5em;
}
#calendar .fc-event .fc-content {
  font-size: 14px !important;
}
#calendar .fc-today {
  background: rgba(var(--main-color-rgb), 0.2) !important;
}

#reject-resone-submit {
  margin: 15px 10px 0;
  position: relative;
  padding: 10px 50px;
}
#reject-resone-submit[disabled]:before {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: url("/img/classera_loading.gif");
  background-size: contain;
}

.reports_comparioson_charts_container {
  display: flex;
  flex-wrap: wrap;
}
.reports_comparioson_charts_container .chart-box-wrapper {
  padding: 5px;
  width: 100%;
}
@media screen and (min-width: 1250px) {
  .reports_comparioson_charts_container .chart-box-wrapper {
    width: 50%;
  }
}
.reports_comparioson_charts_container .chart-box-wrapper .chart-box-inner {
  background: #f3f3f3;
  border-radius: 7px;
  height: 100%;
  padding: 10px;
}
.reports_comparioson_charts_container .chart-box-wrapper .chart-box-inner .legend-chart > ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.reports_comparioson_charts_container .chart-box-wrapper .chart-box-inner .legend-chart > ul li {
  cursor: pointer;
  margin: 0px 10px;
  display: flex;
}
.reports_comparioson_charts_container .chart-box-wrapper .chart-box-inner .legend-chart > ul li span {
  padding-left: 8px;
  font-size: 12px;
}

#chartReportsComparisonAnalysisForm .tab-content {
  box-shadow: none;
  padding: 0;
}
#chartReportsComparisonAnalysisForm .tab-content .form-group.input_error_validation input, #chartReportsComparisonAnalysisForm .tab-content .form-group.input_error_validation .select-styled, #chartReportsComparisonAnalysisForm .tab-content .form-group.input_error_validation .chosen-container-single .chosen-single {
  border: 1px solid #e5301c;
}
#chartReportsComparisonAnalysisForm .loader-wrapper {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
}
#chartReportsComparisonAnalysisForm .diagrams-tabs {
  margin: 15px 0 0;
  position: relative;
  width: 100%;
  padding-left: 80px;
}
#chartReportsComparisonAnalysisForm .diagrams-tabs > li {
  background: #fff;
  margin: 2px;
  border-radius: 5px;
}
#chartReportsComparisonAnalysisForm .diagrams-tabs > li > a {
  border: 0;
  padding: 15px;
}
#chartReportsComparisonAnalysisForm .diagrams-tabs > li > a[disabled] {
  pointer-events: none;
  opacity: 0.5;
}
#chartReportsComparisonAnalysisForm .diagrams-tabs > li.active {
  background: var(--main-color);
}
#chartReportsComparisonAnalysisForm .diagrams-tabs > li.active > a {
  border: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
}
#chartReportsComparisonAnalysisForm .diagrams-tabs > li.active > a:hover, #chartReportsComparisonAnalysisForm .diagrams-tabs > li.active > a:focus {
  border: 0;
  box-shadow: none;
}
#chartReportsComparisonAnalysisForm .form-actions-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
#chartReportsComparisonAnalysisForm .expandContentBtn {
  margin: 5px 5px 0;
  border: 4px;
  box-shadow: none;
  position: absolute;
  left: 10px;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  padding: 10px;
  text-align: center;
}
#chartReportsComparisonAnalysisForm .expandContentBtn i {
  font-size: 2em;
  margin: 0;
}
#chartReportsComparisonAnalysisForm .expandContentBtn[aria-expanded=false] .fa-caret-up {
  display: none;
}
#chartReportsComparisonAnalysisForm .expandContentBtn[aria-expanded=true] .fa-caret-down {
  display: none;
}

.theme_of_school_box .theme_colors_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.theme_of_school_box .theme_colors_box .color_of_school {
  width: 40px;
  height: 40px;
  margin: 7px;
  border-radius: 50%;
  transition: ease-in-out 0.1s all;
  cursor: pointer;
  position: relative;
}
.theme_of_school_box .theme_colors_box .color_of_school.selected:before {
  content: "\f00c";
  font: normal normal normal 14px/1 FontAwesome;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
}
.theme_of_school_box .theme_colors_box .color_of_school:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

#content_wrapper.loading {
  position: relative;
}
#content_wrapper.loading:before {
  content: url(/img/classera_loading.gif);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 222;
  border-radius: 7px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: brightness(0.5);
}

.add-book-form fieldset {
  box-shadow: none !important;
  width: auto !important;
}
.add-book-form fieldset form {
  background: transparent;
}
.add-book-form fieldset form .ezdz-dropzone {
  margin: 0 auto;
}

.view-preparation-widget {
  background: #fafafa;
}
.view-preparation-widget .widget-header, .view-preparation-widget .widget-body {
  background: transparent;
}

.reportCardsTypeButton span {
  background: var(--main-color);
}

.report-cards-app .progress li.active:before {
  background: var(--main-color);
}
.report-cards-app table th i.add-to-calc {
  background: var(--main-color);
}
.report-cards-app table {
  border: 1px solid #eee;
}
.report-cards-app table td {
  border: 1px solid #eee;
}
.report-cards-app table th i.add-to-calc {
  background: var(--main-color);
}

.attachment_details_wrapper .fa-chevron-left:hover, .attachment_details_wrapper .fa-chevron-right:hover {
  color: var(--main-color);
}

.attcControls {
  margin-bottom: 10px;
  background-color: var(--main-color);
  border-radius: 10px 10px 0 0;
}

.primary-hover-bg {
  background: rgba(var(--main-color-rgb), 90%);
  color: #fff;
}

.hijriDateCalendarHeader {
  color: var(--main-color);
}

.badges i.add-badge {
  background: var(--main-color);
}

#criteria_based_report_grid_wrapper .fa-unlock.change-status {
  color: var(--main-color);
}

table#study_plan img {
  max-width: 400px;
  height: auto !important;
  cursor: pointer;
}

#weekly_plan_image_zoom_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 11111;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#weekly_plan_image_zoom_box img {
  max-width: 94%;
  height: auto;
  max-height: 95%;
  border-radius: 5px;
  cursor: auto;
}
#weekly_plan_image_zoom_box .close_image_zoom {
  color: #fff;
  font-size: 30px;
  position: absolute;
  left: 20px;
  top: 10px;
}
#weekly_plan_image_zoom_box .close_image_zoom i {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
}

.tree_container {
  background-color: #f7f7f7 !important;
}

.node_link_criterion_page {
  margin: 0 auto;
}
.node_link_criterion_page .tree_actions {
  margin-top: 30px;
}
.node_link_criterion_page #linked-nodes li {
  list-style-position: inside;
  display: flex;
}
.node_link_criterion_page #linked-nodes li .ajaxDelete {
  margin-right: 10px;
  color: #e5301c;
}
.node_link_criterion_page .linked_nodes_container {
  min-width: 250px;
  padding: 15px;
  margin: 0 10px;
  min-height: 150px;
  flex: 1;
  background: #eee;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.node_link_criterion_page .linked_nodes_container > h3 {
  color: var(--main-color);
}
.node_link_criterion_page .node_link_criterion_wrapper {
  display: flex;
  flex-wrap: wrap;
}
.node_link_criterion_page .tree_container {
  display: none;
  margin-left: 10px;
  overflow: auto;
  overflow-y: hidden;
  padding: 15px;
  min-width: 300px;
  flex: 1;
  min-height: 150px;
}
.node_link_criterion_page .tree_container form {
  background: transparent;
}
.node_link_criterion_page #jstree_node_tree i.jstree-icon.jstree-themeicon {
  background-image: url("/img/yellowBook.png");
  background-size: 20px !important;
  background-position: center;
}
.node_link_criterion_page .loadingSpan img {
  width: 23px;
}
.node_link_criterion_page span.emptyFile img {
  width: 20px;
  max-width: 0 5px;
}
.node_link_criterion_page .tree-loading {
  text-align: center;
}
.node_link_criterion_page .tools-container {
  align-items: center;
  flex-flow: column;
  display: flex;
  justify-content: space-around;
  margin: 15px 0;
  padding: 10px;
  width: 100%;
}
.node_link_criterion_page .node-name {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 10px 0;
  text-align: center;
  width: 90%;
}
.node_link_criterion_page .tools-container .node-name input, .node_link_criterion_page .tools-container .input-tool input,
.node_link_criterion_page .tools-container .input-tool button {
  margin: 0 5px 0 0;
  padding: 5px;
}
.node_link_criterion_page .tools-container .input-tool button {
  width: 50px;
}
.node_link_criterion_page .tools-container .input-tool input {
  border-radius: 5px;
}
.node_link_criterion_page .node-name input {
  border-radius: 5px;
  height: 36px;
  width: 80%;
}
.node_link_criterion_page input.disabled {
  background: none;
  border: none;
}
.node_link_criterion_page .node-name span {
  margin: 5px;
}
.node_link_criterion_page .node-name span img {
  width: 30px;
}
.node_link_criterion_page .new-nodes-container .inputs input {
  margin: 0 0 10px 0;
}
.node_link_criterion_page .slid-tools-container {
  margin: 0 0 20px 0;
  border-radius: 25px;
}
.node_link_criterion_page #add-new-node-btn {
  display: none;
  margin: 10px;
}
.node_link_criterion_page span.A-new-node-killer {
  background-color: #67d0dc;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  padding: 6px;
}
.node_link_criterion_page .new-nodes-container {
  display: flex;
  width: 100%;
  padding: 0 23px;
}
.node_link_criterion_page input.new-node-pass-per {
  width: 24%;
}
.node_link_criterion_page .inputs {
  width: 100%;
}
.node_link_criterion_page button#edit-node-btn {
  border-radius: 20px;
  margin: 0 5px;
}

.add_subtitles_page .attachment__view--btn, .add_subtitles_page .attachment__edit--btn {
  padding: 5px;
}
.add_subtitles_page .title {
  text-align: center;
  font-size: 19px !important;
  font-weight: 500 !important;
  height: auto;
  word-break: break-all;
}
.add_subtitles_page .subtitle_box {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fafafa;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  transition: ease-in-out 0.3s;
  margin: 0 auto;
  border-radius: 7px;
}
.add_subtitles_page .subtitle_box .back {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.add_subtitles_page .back {
  height: 197px;
  padding-top: 30px;
}
.add_subtitles_page .subtitle_actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

#AttachmentUploadForm .ProgressWrapperBox #loadingContainer {
  top: 40px;
}
#AttachmentUploadForm #filesList .file-block {
  border-radius: 8px;
  background-color: var(--main-color);
  margin: 10px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
}
#AttachmentUploadForm #filesList .file-block .sorting_section {
  display: flex;
  justify-content: center;
  align-items: center;
}
#AttachmentUploadForm #filesList .file-block > span.name {
  padding-right: 10px;
  width: max-content;
  display: inline-flex;
  color: #fff;
}
#AttachmentUploadForm #filesList .file-block .file-delete {
  display: flex;
  width: 24px;
  color: initial;
  font-size: large;
  justify-content: center;
  margin-right: 3px;
  cursor: pointer;
  color: #fff;
}
#AttachmentUploadForm #filesList .file-block .file-delete:hover {
  opacity: 0.7;
}
#AttachmentUploadForm #filesList .file-block .file-up, #AttachmentUploadForm #filesList .file-block .file-down {
  transition: all ease-in-out 0.3s;
  margin: 2px;
  font-size: 22px;
  cursor: pointer;
  color: #fff;
}
#AttachmentUploadForm #filesList .file-block .file-up:hover, #AttachmentUploadForm #filesList .file-block .file-down:hover {
  opacity: 0.7;
}
#AttachmentUploadForm label[for=sections_select_all_] {
  display: inline-block;
  vertical-align: top;
  margin: 0 10px;
  padding: 0;
}

.NationalDayImage {
  padding: 0 20px;
}
@media screen and (max-width: 600px) {
  .NationalDayImage {
    padding: 0 15px;
  }
}
.NationalDayImage img {
  width: 100%;
  height: 70px;
  display: block;
  object-fit: contain;
  margin: 0 auto 10px;
  border-radius: 7px;
}
@media screen and (min-width: 1728px) {
  .NationalDayImage img {
    object-fit: cover;
  }
}

.app-links .share_your_ideas_box {
  display: block !important;
  margin: 20px 0 -20px;
}
.app-links .share_your_ideas_box a {
  width: 100%;
  display: flex !important;
  align-items: center;
  color: var(--main-color);
  justify-content: center;
  margin: 0 auto;
  background: unset !important;
  height: unset !important;
  border-radius: 7px;
  border: 0;
}
.app-links .share_your_ideas_box a i {
  margin-left: 7px;
  font-size: 14px;
  display: block;
}

.courses_points_graph_wrapper ul {
  margin: 10px 0;
}
.courses_points_graph_wrapper ul li {
  list-style: none;
}
.courses_points_graph_wrapper button {
  margin-left: 10px;
}
.courses_points_graph_wrapper h2 {
  margin: 7px 0 !important;
  background: #fafafa;
  padding: 10px;
}
.courses_points_graph_wrapper .collapse_btn:before {
  margin-left: 5px;
  cursor: pointer;
  font-size: 20px;
  color: var(--main-color);
}
.courses_points_graph_wrapper .collapse_btn[aria-expanded=false]:before {
  content: "\f055";
  font-family: Fontawesome;
}
.courses_points_graph_wrapper .collapse_btn[aria-expanded=true]:before {
  content: "\f056";
  font-family: Fontawesome;
}
.courses_points_graph_wrapper .collapse.in {
  padding-right: 20px;
}
.courses_points_graph_wrapper .parent_of_nodes_title {
  font-weight: 700 !important;
  font-size: 22px;
}
.courses_points_graph_wrapper .nodes_list {
  width: 100%;
  max-width: 600px;
}
.courses_points_graph_wrapper .no_sub_ids {
  display: flex;
  justify-content: space-between;
  padding-left: 7px;
}

.semster_plan_wrapper .tsupv-index-box {
  box-shadow: unset;
  border: 1px solid #ddd;
}
.semster_plan_wrapper .tsupv-index-box .card-header {
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (min-width: 750px) {
  .semster_plan_wrapper .tsupv-index-box .card-header > div, .semster_plan_wrapper .tsupv-index-box .card-header > p {
    width: calc(20% - 7px);
  }
}
.semster_plan_wrapper .tsupv-index-box p {
  font-size: 15px;
  margin: 5px;
}
.semster_plan_wrapper .tsupv-index-box p .clock-icon {
  margin-left: 5px;
  font-size: 16px;
}
.semster_plan_wrapper .actions_wrapper {
  display: flex;
  justify-content: center;
}
.semster_plan_wrapper .actions_wrapper [data-target="#add_lectures"] {
  margin-left: 5px;
}

.semester_plan_download_btn.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.semester_plan_download_btn.btn i {
  margin-left: 7px !important;
}

.expand_collapse_download_section_wrapper {
  margin: 15px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.expand_collapse_download_section_wrapper .expandListButton {
  display: inline-flex;
  align-items: center;
}
.expand_collapse_download_section_wrapper .expandListButton i {
  color: var(--main-color);
  margin-left: 7px !important;
}

#SemesterPlanSemsterPlanForm {
  width: 100%;
}

#students.table-bordered > tbody > tr > td[data-grade_id] {
  color: #444;
}

.dynamic_create_school_vertical_tree {
  padding-top: 40px;
  padding-bottom: 40px;
  background: #fff;
  border-radius: 7px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  padding: 15px;
  min-width: 200px;
  flex: 1;
  margin-bottom: 15px;
}
@media screen and (min-width: 750px) {
  .dynamic_create_school_vertical_tree {
    max-width: 200px;
    margin-left: 15px;
  }
}
.dynamic_create_school_vertical_tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 10px 5px;
  background: #fafafa;
  border-radius: 4px;
  margin-bottom: 7px;
}
.dynamic_create_school_vertical_tree li:before {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  left: auto;
  right: 9px;
  border-right: 1px dashed #ddd;
  bottom: 50px;
}
.dynamic_create_school_vertical_tree li:after {
  content: "";
  position: absolute;
  top: 21px;
  width: 10px;
  height: 20px;
  left: auto;
  right: 12px;
  border-top: 1px dashed #ddd;
}
.dynamic_create_school_vertical_tree li a {
  display: inline-block;
  padding: 8px 10px;
  text-decoration: none;
  color: #444;
  text-align: right;
  padding-right: 25px;
  font-size: 13px;
  border-radius: 4px;
  width: 100%;
  position: relative;
}
.dynamic_create_school_vertical_tree li a:before {
  content: "";
  width: 12px;
  height: 12px;
  background: #ddd;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  border-radius: 50%;
}
.dynamic_create_school_vertical_tree li.active a:before {
  background: var(--main-color);
}
.dynamic_create_school_vertical_tree li:last-child::before {
  height: 19px;
}
.dynamic_create_school_vertical_tree li a:hover + ul li::after,
.dynamic_create_school_vertical_tree li a:hover + ul li::before,
.dynamic_create_school_vertical_tree li a:hover + ul::before,
.dynamic_create_school_vertical_tree li a:hover + ul ul::before {
  border-color: #fbba00;
}
.dynamic_create_school_vertical_tree li li {
  padding-right: 20px;
  padding-top: 0;
  border: 0;
  margin: 0;
}
.dynamic_create_school_vertical_tree li li:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding-bottom: 10px;
}
.dynamic_create_school_vertical_tree li li a {
  border: 0;
  background: transparent;
  padding: 12px 5px 4px;
  color: #777;
  text-align: right;
}
.dynamic_create_school_vertical_tree li li a:before {
  background: transparent;
  width: 0;
}
.dynamic_create_school_vertical_tree > ul > li::before,
.dynamic_create_school_vertical_tree > ul > li::after {
  border: 0;
}

.dynamic_create_school_wrapper {
  display: flex;
  flex-wrap: wrap;
}
.dynamic_create_school_wrapper .manageSchedule {
  flex: 1;
}
@media screen and (min-width: 750px) {
  .dynamic_create_school_wrapper .manageSchedule {
    max-width: calc(100% - 230px);
  }
}

.cursor-pointer {
  cursor: pointer;
}

.margin-bottom-20 {
  margin-bottom: 20px;
}

.list-of-children-in-parent-dashboard {
  margin: 0 -10px;
}
.list-of-children-in-parent-dashboard .cardParentStudent {
  border-radius: 15px;
  background: #fff;
  padding: 10px;
  position: relative;
  padding-top: 30px;
  text-align: center;
}
.list-of-children-in-parent-dashboard .cardParentStudent .userImage {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 30px 30px;
}
.list-of-children-in-parent-dashboard .cardParentStudent .userImage img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.list-of-children-in-parent-dashboard .cardParentStudent .details_ {
  display: none;
}
.list-of-children-in-parent-dashboard .cardParentStudent .score_progress_element {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 120px;
  height: 120px;
  transform: translateX(-50%);
}
.list-of-children-in-parent-dashboard .cardParentStudent .score_progress_element svg {
  --progress-percent: 0;
  --progress-bar-width: 100%;
  transform: rotate(-90deg);
}
.list-of-children-in-parent-dashboard .cardParentStudent .score_progress_element circle.value {
  stroke-width: var(--progress-bar-width);
  stroke-dasharray: 314.1592%;
  stroke-dashoffset: calc(100% * (100 - var(--progress-percent)) / 100 * 3.141592);
  transition: stroke-dashoffset 6s linear;
}
.list-of-children-in-parent-dashboard .cardParentStudent .score_progress_element .circle_empty {
  stroke-width: var(--progress-bar-width);
  stroke-dasharray: 0;
  stroke-dashoffset: 100%;
  stroke: rgba(0, 0, 0, 0.1);
}
.list-of-children-in-parent-dashboard .cardParentStudent .btn {
  border-radius: 25px;
  color: var(--main-color);
  border-color: var(--main-color);
  padding: 6px 15px;
  margin-top: 15px;
  background: transparent !important;
}
.list-of-children-in-parent-dashboard .cardParentStudent .btn.btn-danger {
  color: #e5301c;
  border-color: #e5301c;
}
.list-of-children-in-parent-dashboard .cardParentStudent .child_score_wrapper {
  display: inline-flex;
  padding: 4px 10px;
  min-width: 50%;
  justify-content: space-around;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}
.list-of-children-in-parent-dashboard .cardParentStudent .child_score_wrapper i, .list-of-children-in-parent-dashboard .cardParentStudent .child_score_wrapper span {
  font-size: 1.2em;
  font-weight: 500;
}
.list-of-children-in-parent-dashboard .cardParentStudent .child_score_wrapper:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--score-color);
  opacity: 0.2;
}
.list-of-children-in-parent-dashboard .cardParentStudentWrapper {
  margin: 10px;
  min-width: 230px;
  max-width: 230px;
  min-height: 200px;
  position: relative;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 470px) {
  .list-of-children-in-parent-dashboard .cardParentStudentWrapper {
    max-width: 100%;
    width: 100%;
  }
}
.list-of-children-in-parent-dashboard .cardParentStudentWrapper.add-student-card form {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0 !important;
}
.list-of-children-in-parent-dashboard .cardParentStudentWrapper.add-student-card form:before, .list-of-children-in-parent-dashboard .cardParentStudentWrapper.add-student-card form img[src*="/img/classera_loading.gif"] {
  display: none !important;
}
.list-of-children-in-parent-dashboard .cardParentStudentWrapper.add-student-card label {
  display: none;
}
.list-of-children-in-parent-dashboard .cardParentStudentWrapper.add-student-card .btn {
  border: 1px solid;
  box-shadow: unset;
  margin: 0;
  margin-top: 20px !important;
  width: 95%;
}
.list-of-children-in-parent-dashboard .cardParentStudentWrapper.add-student-card .userImage i {
  color: var(--main-color);
  font-size: 7em;
}
.list-of-children-in-parent-dashboard .cardParentStudentWrapper.add-student-card .select-styled {
  border: 0 !important;
}
.list-of-children-in-parent-dashboard .cardParentStudentWrapper .cardParentStudent {
  border-radius: 5px;
  min-height: 300px;
  min-width: 100%;
  border-radius: 15px;
}
.list-of-children-in-parent-dashboard .cardParentStudentWrapper .cardParentStudent .details_ {
  display: block;
}
@media (max-width: 550px) {
  .list-of-children-in-parent-dashboard .cardParentStudentWrapper {
    width: 100%;
  }
}

.view_book_details_modal {
  background: rgba(255, 255, 255, 0.8);
}
.view_book_details_modal iframe {
  max-height: calc(100% - 127px);
}
.view_book_details_modal .modal-content {
  border-radius: 25px;
  overflow: hidden;
}

#content_wrapper .alert-warning, .page-content .alert-warning {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.box_transparent_blue_bg {
  background: rgba(0, 0, 0, 0.15);
}

.icon-icon-office-2:before {
  color: var(--main-color);
}

.height-100 {
  height: 100%;
}

#students_scores_wrap {
  width: 100%;
  overflow-x: auto;
  min-width: 0;
}

#students_scores {
  width: auto !important;
  min-width: 430px !important;
}

#students_scores th {
  white-space: nowrap;
  min-width: 0;
}

#students_scores td {
  min-width: 0;
}

.width-100 {
  width: 100%;
}

.gg-spinner, .formLoading {
  transform: scale(var(--ggs, 1));
}

.gg-spinner, .formLoading,
.gg-spinner::after,
.formLoading::after,
.gg-spinner::before,
.formLoading::before {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}

.gg-spinner::after, .formLoading::after,
.gg-spinner::before,
.formLoading::before {
  content: "";
  position: absolute;
  border-radius: 100px;
}

.gg-spinner::before, .formLoading::before {
  animation: spinner 1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  border: 3px solid transparent;
  border-top-color: currentColor;
}

.gg-spinner::after, .formLoading::after {
  border: 3px solid;
  opacity: 0.2;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.import_financial_claims_table {
  overflow-x: auto;
}

@media screen and (min-width: 600px) {
  #import_financial_claimsForm {
    min-width: 420px;
  }
}
#action_to_notify {
  white-space: normal;
  height: auto;
  line-height: 2.2;
  padding: 10px;
}

#UserLoginForm .password-wrapper .fa {
  left: 20px;
}

.video-js .vjs-modal-dialog {
  background: linear-gradient(180deg, rgba(4, 102, 140, 0.8), rgba(4, 102, 140, 0.3)) !important;
  outline: 100px solid rgba(4, 102, 140, 0.3) !important;
  height: 80% !important;
}

.vjs-text-track-settings .vjs-modal-dialog-content {
  grid-template-columns: 2fr 1fr !important;
  height: fit-content !important;
}
@media (min-width: 880px) and (max-width: 1250px) {
  .vjs-text-track-settings .vjs-modal-dialog-content {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 710px) {
  .vjs-text-track-settings .vjs-modal-dialog-content {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  .vjs-text-track-settings .vjs-modal-dialog-content {
    padding: 6px 6px 0 6px !important;
  }
}

.vjs-text-track-settings .vjs-modal-dialog-content .vjs-track-settings-colors .vjs-track-setting {
  flex-direction: row;
}
.vjs-text-track-settings .vjs-modal-dialog-content .vjs-track-settings-colors .vjs-track-setting > select {
  max-width: 50% !important;
}
.vjs-text-track-settings .vjs-modal-dialog-content .vjs-track-settings-colors .vjs-track-setting .vjs-opacity > select {
  max-width: 100% !important;
}

.vjs-text-track-settings fieldset {
  height: 75px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
@media (max-width: 600px) {
  .vjs-text-track-settings fieldset {
    height: 45px;
  }
}

.vjs-text-track-settings .vjs-track-setting > legend {
  font-size: 15px;
  padding-bottom: 0px;
  padding-top: 0px;
}
@media (max-width: 600px) {
  .vjs-text-track-settings .vjs-track-setting > legend {
    font-size: 12px;
  }
}

.vjs-text-track-settings .vjs-opacity > select,
.vjs-text-track-settings .vjs-track-setting > select {
  font-size: 11px;
  height: 40px;
  min-height: 40px;
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .vjs-text-track-settings .vjs-opacity > select,
.vjs-text-track-settings .vjs-track-setting > select {
    font-size: 10px;
    height: 25px;
    min-height: 25px;
  }
}

.vjs-text-track-settings legend {
  top: 0;
  margin-bottom: 0 !important;
}

.vjs-text-track-settings span {
  margin-top: 10px;
}

.vjs-text-track-settings .vjs-opacity {
  width: 100%;
  margin-top: 0px;
}

.vjs-text-track-settings .vjs-track-settings-controls button {
  background: var(--main-color);
  color: #fff;
  border-radius: 8px;
  border-color: var(--main-color);
  padding: 7px 10px;
  margin: 5px;
}
@media (max-width: 600px) {
  .vjs-text-track-settings .vjs-track-settings-controls button {
    padding: 4px 7px;
    font-size: 10px;
  }
}

.vjs-text-track-settings .vjs-track-settings-controls button:focus {
  background-color: white;
  color: #000;
  border: 1px solid #ccc;
}

.page-container #canteensPicker_chosen {
  width: auto !important;
}

.page-container.minimize-sidebar #canteensPicker_chosen {
  width: 50px !important;
}
.page-container.minimize-sidebar #canteensPicker_chosen.chosen-with-drop {
  width: 230px !important;
}

.trip_wrapper_box {
  margin: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

#visits .card-counter {
  display: flex;
  border: 1px solid #ddd;
  margin: 5px;
  padding: 20px 10px;
  background-color: #fff;
  height: 100px;
  border-radius: 13px;
  transition: 0.3s linear all;
}
#visits .card-counter .card-i.primary {
  background-color: #AEECEF;
}
#visits .card-counter .card-i.danger {
  background-color: #53599A;
}
#visits .card-counter .card-i.success {
  background-color: #6D9DC5;
}
#visits .card-counter .card-i.info {
  background-color: #80DED9;
}
#visits .card-counter .card-i {
  width: 60px;
  min-width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
#visits .card-counter i {
  font-size: 2.5em;
  opacity: 1;
  color: #FFF;
}
#visits .card-counter .card-text {
  display: flex;
  align-items: center;
  margin-right: 15px;
  width: 100%;
  color: #444 !important;
}
#visits .card-counter .count-name {
  opacity: 1;
  font-size: 20px;
  width: 125px;
}
#visits .card-counter .count-numbers {
  font-size: 30px;
  margin: auto;
}
#visits .card-counter .count-numbers.primary {
  color: #AEECEF !important;
}
#visits .card-counter .count-numbers.danger {
  color: #53599A !important;
}
#visits .card-counter .count-numbers.success {
  color: #6D9DC5 !important;
}
#visits .card-counter .count-numbers.info {
  color: #80DED9 !important;
}
@media (max-width: 500px) {
  #visits .container {
    padding: 0;
  }
  #visits [class*=col] {
    padding: 0;
  }
}
@media (max-width: 420px) {
  #visits .card-counter .count-name {
    font-size: 17px;
    width: min-content;
  }
  #visits .card-counter .count-numbers {
    font-size: 17px;
  }
  #visits .card-counter .card-text {
    justify-content: space-between;
  }
  #visits .card-counter .card-i {
    width: 50px;
    min-width: 50px;
    height: 50px;
  }
}

.trip_wrapper_box {
  margin: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.minimize-sidebar .my_card .inspire_card_icon {
  width: 120px;
  margin: auto 20px;
  display: block;
}
@media (max-width: 1000px) {
  .minimize-sidebar .my_card .inspire_card_icon {
    display: none;
  }
}

.my_card .card_shadow {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5) !important;
  border-radius: 10px !important;
  margin-bottom: 0;
}
.my_card .inspire_card {
  background-image: url(/img/my_score_header.svg);
  background-color: #71B44B;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  display: flex;
  padding: 20px 30px;
}
.my_card .inspire_card.Golden {
  background-color: #B8860B;
}
.my_card .inspire_card.Diamond {
  background-color: #1e4b70;
}
@media (max-width: 950px) {
  .my_card .inspire_card {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 750px) {
  .my_card .inspire_card {
    background-position: -380px;
  }
}
@media (max-width: 1300px) {
  .my_card .inspire_card_icon {
    display: none;
  }
}
.my_card .inspire_card_info {
  color: white;
  margin: auto 20px;
  max-width: 350px;
}
@media (max-width: 750px) {
  .my_card .inspire_card_info {
    margin: unset;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    max-width: none;
  }
}
.my_card .points_card {
  background-color: #fff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 30px 20px;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: space-around;
  font-size: 15.5px;
  font-weight: 400;
}
.my_card .points_card_number {
  font-size: 30px;
}
.my_card .card_info_Indicator {
  font-size: 40px;
  font-weight: 500;
}
@media (max-width: 450px) {
  .my_card .card_info_Indicator {
    font-size: 33px;
  }
}
.my_card .card_info_Indicator_aa {
  font-size: 18px;
  font-weight: 300;
}
.my_card .card_info_icon {
  font-size: 20px;
  margin-top: 15px;
}
.my_card .card_info_number {
  font-size: 24px;
}
@media (max-width: 450px) {
  .my_card .card_info_number {
    font-size: 20px;
  }
}
.my_card .inspire_card_chart {
  position: relative;
  color: white;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 200px;
  min-width: 200px;
  border: 2px solid white;
  border-radius: 50%;
}
@media (max-width: 750px) {
  .my_card .inspire_card_chart {
    height: 150px;
    width: 150px;
    min-width: 150px;
  }
}
@media (max-width: 450px) {
  .my_card .inspire_card_chart {
    height: 140px;
    width: 140px;
    min-width: 140px;
    margin: 10px;
  }
}
.my_card .inspire_card_chart .score_title {
  font-size: 30px;
  line-height: 1.2em;
}
@media (max-width: 750px) {
  .my_card .inspire_card_chart .score_title {
    font-size: 24px;
  }
}
@media (max-width: 450px) {
  .my_card .inspire_card_chart .score_title {
    font-size: 20px;
  }
}
.my_card .inspire_card_chart .score_title_2 {
  font-size: 14px;
}
@media (max-width: 750px) {
  .my_card .inspire_card_chart .score_title_2 {
    font-size: 12px;
  }
}
@media (max-width: 450px) {
  .my_card .inspire_card_chart .score_title_2 {
    font-size: 11px;
  }
}
.my_card .inspire_card_chart .score_number {
  font-size: 45px;
}
@media (max-width: 750px) {
  .my_card .inspire_card_chart .score_number {
    font-size: 35px;
  }
}
@media (max-width: 450px) {
  .my_card .inspire_card_chart .score_number {
    font-size: 32px;
  }
}
.my_card .QR_box {
  height: 120px;
  width: 120px;
  min-width: 120px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  margin: auto;
}
.my_card .QR_container {
  height: 116px;
  width: 106px;
  position: relative;
  overflow: hidden;
}
.my_card .QR_container img {
  position: absolute;
  bottom: -27px;
  left: -30px;
  height: auto;
  width: 650px;
  max-width: none;
}
.my_card .points_card_icon img {
  height: 30px;
  width: 30px;
}
.my_card .score_progress_element {
  width: 220px;
  height: 220px;
}
.my_card .score_progress_element .value {
  stroke-width: var(--progress-bar-width);
  stroke-dasharray: 314.1592%;
  stroke-dashoffset: calc(100% * (-100 + var(--progress-percent)) / 100 * 3.141592);
  transition: stroke-dashoffset 6s linear;
}
.my_card .score_progress_element .circle_empty {
  stroke-width: 5px;
  stroke-dasharray: 0;
  stroke-dashoffset: 100%;
  stroke: rgba(255, 255, 255, 0.3);
}
.my_card #score_range_bar {
  background-color: #fff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 20px 30px;
  border: unset;
}
.my_card #score_range_bar .head {
  display: flex;
  justify-content: space-between;
}
.my_card #score_range_bar .head .title {
  font-size: 30px;
  font-weight: 500;
}
.my_card #score_range_bar .head .temporary_rank {
  display: flex;
  gap: 15px;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 20px 10px;
  width: 350px;
  align-items: center;
  justify-content: space-around;
}
.my_card #score_range_bar .head .temporary_rank .title {
  font-size: 16px;
  font-weight: 400;
}
.my_card #score_range_bar .head .temporary_rank .diamond {
  font-size: 20px;
  font-weight: 500;
}
.my_card #score_range_bar .Rank_bar {
  margin-top: 25px;
}
@media (max-width: 850px) {
  .my_card #score_range_bar .Rank_bar {
    margin-top: 15px;
  }
}
.my_card #score_range_bar .Rank_bar .pointer {
  width: 100%;
  position: relative;
  height: 1em;
  font-size: 100px;
  z-index: 2;
}
.my_card #score_range_bar .Rank_bar .ratio-percent {
  font-size: 20px;
  font-weight: 1000;
  color: #aeaeae;
  position: absolute;
  right: calc(var(--ratio-percent) * 1% - 20px - 20px * var(--ratio-percent) / 100);
  top: -25px;
  width: 59px;
  text-align: center;
}
@media (max-width: 850px) {
  .my_card #score_range_bar .Rank_bar .ratio-percent {
    left: calc(var(--ratio-percent) * 1% - 10px - 10px * var(--ratio-percent) / 100);
    width: 30px;
    font-size: 13px;
    top: -15px;
  }
}
.my_card #score_range_bar .Rank_bar .icon-location-pointer {
  font-size: inherit;
  position: absolute;
  top: 0;
  right: calc(var(--ratio-percent) * 1% - 20px - 20px * var(--ratio-percent) / 100);
  display: flex;
}
.my_card #score_range_bar .Rank_bar .bar {
  width: 100%;
  height: 20px;
  position: relative;
  top: -32px;
  overflow: hidden;
  border-radius: 10px;
}
.my_card #score_range_bar .Rank_bar .bar .green {
  height: 100%;
  width: calc(55% + 20px);
  border-radius: 10px;
  position: absolute;
  right: 0;
  background-color: #afd136;
}
.my_card #score_range_bar .Rank_bar .bar .golden {
  height: 100%;
  width: calc(40% + 20px);
  border-radius: 10px;
  position: absolute;
  right: 55%;
  background-color: #B8860B;
}
.my_card #score_range_bar .Rank_bar .bar .diamond {
  height: 100%;
  width: 5%;
  border-radius: 10px;
  position: absolute;
  right: 95%;
  background-color: #1e4b70;
}
.my_card #score_range_bar .Rank_bar .bar_box {
  display: flex;
  margin-top: 40px;
  margin-bottom: 10px;
}
.my_card #score_range_bar .Rank_bar .bar_box > div {
  display: flex;
  align-items: center;
  margin-left: 25px;
}
.my_card #score_range_bar .Rank_bar .bar_box .piece {
  width: 35px;
  height: 10px;
  border-radius: 5px;
  margin-left: 15px;
}
.my_card #score_range_bar .Rank_bar .bar_box .color {
  font-size: 15px;
}
.my_card .vertical_list ul.scrollable.short {
  height: 329px;
}
.my_card #score_range_bar .Rank_bar .icon-location-pointer .path1 {
  z-index: -1;
}
.my_card #score_range_bar .Rank_bar .icon-location-pointer .path2:before,
.my_card #score_range_bar .Rank_bar .icon-location-pointer .path3:before {
  color: #aeaeae;
}
@media (max-width: 850px) {
  .my_card #score_range_bar .Rank_bar .pointer {
    font-size: 50px;
  }
  .my_card #score_range_bar .Rank_bar .icon-location-pointer {
    right: calc(var(--ratio-percent) * 1% - 10px - 10px * var(--ratio-percent) / 100);
  }
  .my_card #score_range_bar .Rank_bar .icon-location-pointer .path1 {
    opacity: 0;
  }
  .my_card #score_range_bar .Rank_bar .bar {
    top: -16px;
    height: 10px;
  }
  .my_card #score_range_bar .Rank_bar .bar_box > div {
    margin-left: 15px;
  }
  .my_card #score_range_bar .Rank_bar .bar_box .piece {
    height: 8px;
    width: 20px;
    margin-left: 5px;
  }
  .my_card #score_range_bar .Rank_bar .bar_box .color {
    font-size: 12px;
  }
}
@media (max-width: 950px) {
  .my_card #score_range_bar .head {
    flex-wrap: wrap;
  }
  .my_card #score_range_bar .head .title {
    font-size: 22px;
    margin-bottom: 10px;
  }
  .my_card #score_range_bar .head .temporary_rank {
    width: unset;
    padding: 12px;
  }
  .my_card #score_range_bar .head .temporary_rank img {
    width: 22px;
    height: 22px;
  }
  .my_card #score_range_bar .head .temporary_rank .title {
    font-size: 14px;
    margin-bottom: 0;
  }
  .my_card #score_range_bar .head .temporary_rank .diamond {
    font-size: 15px;
  }
}
@media (max-width: 650px) {
  .my_card #score_range_bar .head {
    flex-wrap: wrap;
  }
  .my_card #score_range_bar .head .title {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .my_card #score_range_bar .head .temporary_rank {
    width: unset;
    padding: 10px;
  }
  .my_card #score_range_bar .head .temporary_rank img {
    width: 20px;
    height: 20px;
  }
  .my_card #score_range_bar .head .temporary_rank .title {
    font-size: 12px;
    margin-bottom: 0;
  }
  .my_card #score_range_bar .head .temporary_rank .diamond {
    font-size: 13px;
  }
}
@media (max-width: 450px) {
  .my_card .points_card {
    padding: 20px 10px;
    font-size: 11px;
  }
  .my_card .points_card_icon img {
    height: 20px;
    width: 20px;
  }
  .my_card .points_card_number {
    font-size: 18px;
  }
}

.card_shadow {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5) !important;
  border-radius: 10px !important;
  margin-bottom: 0;
  background-color: #fff !important;
}

.minimize-sidebar .sidebar-menu li.hidden-for-minimize {
  display: none;
}

#students_list.table th.teacher-colum {
  position: sticky;
  right: -1px;
  background: #fff;
}

.no_children_found {
  background: #fff;
  min-height: 250px;
  border-radius: 14px;
  max-width: 400px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}
.no_children_found h5 {
  opacity: 0.6;
}
.no_children_found i {
  font-size: 3em;
}

.notice_message_blue {
  background: rgba(var(--main-color-rgb), 0.2);
  border: 1px solid rgba(var(--main-color-rgb), 0.4);
  border-radius: 7px;
  padding: 15px;
}
.notice_message_blue i {
  margin-left: 20px;
  color: var(--main-color);
  font-weight: 600;
  font-size: 1.4em;
}

.registration_status_btns_wrapper a {
  background: var(--main-color);
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.registration_status_btns_wrapper a:hover {
  color: #fff;
}

.registration_requests_child_list_container .child_card_ {
  padding: 15px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.registration_requests_child_list_container .child_card_ .child_card_header i, .registration_requests_child_list_container .child_card_ .child_card_header svg {
  margin-left: 8px;
}

.rotate_180_rtl {
  transform: rotate(0deg);
}

.statistics_reportForm_wrapper {
  height: fit-content;
}
.statistics_reportForm_wrapper .main_canvas_container {
  position: relative;
  height: 100%;
}
.statistics_reportForm_wrapper .main_canvas_container .main_canvas_data_center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.statistics_reportForm_wrapper .main_canvas_container .main_canvas_data_center p {
  font-weight: bold;
  margin: 0;
}
.statistics_reportForm_wrapper .main_canvas_container .main_canvas_data_center h1 {
  margin: 10px 0;
}
.statistics_reportForm_wrapper .admin-dashboard-box {
  min-height: 335px;
}
.statistics_reportForm_wrapper #statistics_reportForm {
  width: 100%;
  min-width: unset;
  background: transparent;
  padding: 0;
}
.statistics_reportForm_wrapper #statistics_reportForm .chosen-container {
  width: 100% !important;
}
.statistics_reportForm_wrapper #statistics_reportForm .form-actions .btn {
  margin: 20px 0 0;
  width: 100%;
}
.statistics_reportForm_wrapper .all-results-wrapper {
  display: grid;
  grid-template-columns: 50% 50%;
}
.statistics_reportForm_wrapper p {
  margin: 0 15px;
}
.statistics_reportForm_wrapper h3 {
  margin: 0;
}
.statistics_reportForm_wrapper .result-labels-box:not(.main_canvas_labels) {
  padding: 30px 25px;
}
@media (min-width: 992px) {
  .statistics_reportForm_wrapper .result-labels-box:not(.main_canvas_labels) {
    border-right: 1px solid #eee;
  }
}
.statistics_reportForm_wrapper .result-labels-box p span {
  display: block;
}
.statistics_reportForm_wrapper .result-labels-box.main_canvas_labels {
  padding: 10px 5px 0;
}
.statistics_reportForm_wrapper .result-labels-box.main_canvas_labels p {
  margin: 0 10px;
}
.statistics_reportForm_wrapper .result-labels-box i {
  background: #eee;
  width: 15px;
  min-width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
  margin-top: 5px;
}
.statistics_reportForm_wrapper .result-labels-box i.green-circle {
  background: #3fb16b;
}
.statistics_reportForm_wrapper .result-labels-box i.yallow-circle {
  background: #ffd41d;
}
.statistics_reportForm_wrapper .result-labels-box i.blue-circle {
  background: #00cdf4;
}
.statistics_reportForm_wrapper .result-labels-box i.red-circle {
  background: #ff1d1d;
}
.statistics_reportForm_wrapper .students_list_container {
  padding: 0;
}
.statistics_reportForm_wrapper .students_list_container .stu_card {
  background: #fafafa;
  padding: 15px;
  border-radius: 7px;
  text-align: center;
}
.statistics_reportForm_wrapper .students_list_container .stu_card .icon_filled_circle {
  background: #eee;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
  margin-bottom: 5px;
}
.statistics_reportForm_wrapper .students_list_container .stu_card .icon_filled_circle.green-circle {
  background: #3fb16b;
}
.statistics_reportForm_wrapper .students_list_container .stu_card .icon_filled_circle.red-circle {
  background: #ff1d1d;
}
.statistics_reportForm_wrapper .students_list_container .stu_card .icon_filled_circle.gray-circle {
  background: #ffd41d;
}
.statistics_reportForm_wrapper .students_list_container .stu_card .stu_name {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.statistics_reportForm_wrapper .students_list_container .stu_card .answered_data_container_for_stu {
  display: grid;
  padding-top: 12px;
  grid-template-columns: 33.3% 33.3% 33.3%;
}
.statistics_reportForm_wrapper .students_list_container .stu_card .answered_data_container_for_stu span {
  font-size: 12px;
}

.pk_dashboard_element_wrapper .circle-icon {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.pk_dashboard_element_wrapper .circle-icon.green-circle {
  background: #3fb16b;
}
.pk_dashboard_element_wrapper .circle-icon.red-circle {
  background: #ff1d1d;
}
.pk_dashboard_element_wrapper .circle-icon.gray-circle {
  background: #8D8D8D;
}
.pk_dashboard_element_wrapper .circle-icon.blue-circle {
  background: #04cdf4;
}
.pk_dashboard_element_wrapper .circle-icon.yellow-circle {
  background: #ffd41d;
}
.pk_dashboard_element_wrapper .circle-icon.purple-circle {
  background: #6b4bd8;
}
.pk_dashboard_element_wrapper .circle-icon.pink-circle {
  background: #c301d3;
}
.pk_dashboard_element_wrapper .circle-icon.orange-circle {
  background: #ef6600;
}
.pk_dashboard_element_wrapper .canva_container {
  position: relative;
}
.pk_dashboard_element_wrapper .canva_container.inClassActivityCanvasContainer, .pk_dashboard_element_wrapper .canva_container.supplementaryAssessmentsCanvasContainer {
  min-height: 250px;
}
.pk_dashboard_element_wrapper .canva_container.videoWatchedCanvasContainer {
  min-height: 260px;
}
.pk_dashboard_element_wrapper .canva_container canvas {
  position: relative;
  z-index: 9;
}
.pk_dashboard_element_wrapper .canva_container .students_total {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.pk_dashboard_element_wrapper .teacher-dashboard-section .section-border {
  width: 1px;
  background: #ddd;
}
.pk_dashboard_element_wrapper .row {
  margin: -10px;
}
.pk_dashboard_element_wrapper .admin-dashboard-box {
  min-height: 340px;
}
.pk_dashboard_element_wrapper .admin-dashboard-box .filter-container select {
  height: unset;
  min-height: unset;
  padding: 5px 10px;
  border-color: #444;
  font-weight: 500;
  margin-right: 5px;
}
.pk_dashboard_element_wrapper .chosen-container-single .chosen-single {
  border-color: #444;
  margin: 0 3px;
}
.pk_dashboard_element_wrapper .supplementaryAssessmentsBox .chosen-container, .pk_dashboard_element_wrapper .inClassActivityBox .chosen-container {
  max-width: 150px;
}
.pk_dashboard_element_wrapper .supplementaryAssessmentsBox .chosen-container-single .chosen-single span, .pk_dashboard_element_wrapper .inClassActivityBox .chosen-container-single .chosen-single span {
  margin-left: 1px;
}
.pk_dashboard_element_wrapper .chosen-container-single .chosen-search input[type=text] {
  padding-right: 3px;
}
@media screen and (max-width: 990px) {
  .pk_dashboard_element_wrapper .teacher-dashboard-section {
    max-height: unset !important;
    height: unset !important;
  }
  .pk_dashboard_element_wrapper #schoolActivation {
    height: unset !important;
  }
}
.pk_dashboard_element_wrapper .loading_box {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  z-index: 1;
}
.pk_dashboard_element_wrapper .filter-container .btn {
  margin-left: 3px;
}
.pk_dashboard_element_wrapper .filter-container .btn.selected {
  color: #fff;
  background: var(--main-color);
  border-color: var(--main-color);
}
.pk_dashboard_element_wrapper .date-picker-container {
  padding-left: 20px;
  margin-left: 20px;
  position: relative;
}
.pk_dashboard_element_wrapper .date-picker-container:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: #fff;
  opacity: 0.6;
}
.pk_dashboard_element_wrapper .date-picker-container .clearDatepicker {
  color: #fff;
  top: 15px;
}
.pk_dashboard_element_wrapper .date-picker-container .btn {
  height: 47px;
  border-radius: 7px;
  color: var(--main-color);
}
.pk_dashboard_element_wrapper .date-picker-container input {
  min-width: 100px;
  height: 47px;
  border-radius: 7px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid #fff !important;
  color: #fff;
}
.pk_dashboard_element_wrapper .date-picker-container input::placeholder {
  color: #fff;
}
.pk_dashboard_element_wrapper .date-picker-container input::-webkit-input-placeholder {
  color: #fff;
}
.pk_dashboard_element_wrapper .date-picker-container input::-moz-placeholder {
  color: #fff;
}
.pk_dashboard_element_wrapper .date-picker-container input:-ms-input-placeholder {
  color: #fff;
}

.min-height-250 {
  min-height: 250px;
}

.upload-attachment-form ul.video-type, #AttachmentUploadForm ul.video-type, #AttachmentUploadForm ul.video-type-ai {
  list-style: none;
  align-items: center;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.upload-attachment-form ul.video-type li, #AttachmentUploadForm ul.video-type li, #AttachmentUploadForm ul.video-type-ai li {
  display: inline-flex;
  min-width: 155px;
  flex: 1;
  height: 110px;
  justify-content: flex-start;
  align-items: center;
  background: #eee;
  font-size: 4em;
  color: #777;
  opacity: 0.9;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  margin: 5px;
  flex-direction: column;
  padding-top: 18px;
  border-radius: 7px;
}
.upload-attachment-form ul.video-type li.not-active, #AttachmentUploadForm ul.video-type li.not-active, #AttachmentUploadForm ul.video-type-ai li.not-active {
  opacity: 0.5;
}
.upload-attachment-form ul.video-type li.active, .upload-attachment-form ul.video-type li:hover, #AttachmentUploadForm ul.video-type li.active, #AttachmentUploadForm ul.video-type li:hover, #AttachmentUploadForm ul.video-type-ai li.active, #AttachmentUploadForm ul.video-type-ai li:hover {
  background: var(--main-color);
  color: #fff;
  opacity: 1;
}
.upload-attachment-form ul.video-type li.active i, .upload-attachment-form ul.video-type li.active i > span:before, .upload-attachment-form ul.video-type li:hover i, .upload-attachment-form ul.video-type li:hover i > span:before, #AttachmentUploadForm ul.video-type li.active i, #AttachmentUploadForm ul.video-type li.active i > span:before, #AttachmentUploadForm ul.video-type li:hover i, #AttachmentUploadForm ul.video-type li:hover i > span:before, #AttachmentUploadForm ul.video-type-ai li.active i, #AttachmentUploadForm ul.video-type-ai li.active i > span:before, #AttachmentUploadForm ul.video-type-ai li:hover i, #AttachmentUploadForm ul.video-type-ai li:hover i > span:before {
  color: #fff !important;
}
.upload-attachment-form ul.video-type li a, #AttachmentUploadForm ul.video-type li a, #AttachmentUploadForm ul.video-type-ai li a {
  text-decoration: unset;
  color: unset;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.upload-attachment-form ul.video-type li img, #AttachmentUploadForm ul.video-type li img, #AttachmentUploadForm ul.video-type-ai li img {
  width: 65px;
  border-radius: 9px;
}
.upload-attachment-form ul.video-type li i, #AttachmentUploadForm ul.video-type li i, #AttachmentUploadForm ul.video-type-ai li i {
  font-size: 35px;
  color: var(--main-color);
}
.upload-attachment-form ul.video-type li p, #AttachmentUploadForm ul.video-type li p, #AttachmentUploadForm ul.video-type-ai li p {
  font-size: 13px;
  margin: 15px 0 5px 0;
  text-align: center;
  line-height: 15px;
}
.upload-attachment-form ul.video-type li.ai_file, #AttachmentUploadForm ul.video-type li.ai_file, #AttachmentUploadForm ul.video-type-ai li.ai_file {
  padding-top: 10px;
  animation: circle_shadow 2s infinite;
}
.upload-attachment-form ul.video-type li.ai_file p, #AttachmentUploadForm ul.video-type li.ai_file p, #AttachmentUploadForm ul.video-type-ai li.ai_file p {
  margin-top: 0;
}
.upload-attachment-form ul.video-type li.ai_file img, #AttachmentUploadForm ul.video-type li.ai_file img, #AttachmentUploadForm ul.video-type-ai li.ai_file img {
  width: 59px;
}
.upload-attachment-form ul.video-type li.ai_file:hover, #AttachmentUploadForm ul.video-type li.ai_file:hover, #AttachmentUploadForm ul.video-type-ai li.ai_file:hover {
  animation: none;
}

@-webkit-keyframes circle_shadow {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--main-color-rgb), 0.9);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(var(--main-color-rgb), 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--main-color-rgb), 0);
  }
}
@keyframes circle_shadow {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(var(--main-color-rgb), 0.4);
    box-shadow: 0 0 0 0 rgba(var(--main-color-rgb), 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(var(--main-color-rgb), 0);
    box-shadow: 0 0 0 10px rgba(var(--main-color-rgb), 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(var(--main-color-rgb), 0);
    box-shadow: 0 0 0 0 rgba(var(--main-color-rgb), 0);
  }
}
#div_registration_fees_amount {
  margin-top: -6px;
  display: block;
  margin-right: 26px;
  border-right: 1px solid var(--main-color);
  padding-right: 10px;
}

#levels_registration_fees {
  margin-bottom: 0 !important;
}

.page-body form.form-border {
  width: 100%;
  background: transparent;
  padding-bottom: 0;
}
.page-body form.form-border .form-group input, .page-body form.form-border .form-group .form-control, .page-body form.form-border .form-group select {
  border-radius: 5px;
}
.page-body form.form-border .select-styled, .page-body form.form-border select {
  border-radius: 5px;
}
.page-body form.form-border .form-field-btn {
  width: 100%;
  text-align: end;
  font-size: 13px;
  color: var(--main-color);
  font-weight: 500;
  cursor: pointer;
  margin-top: 5px;
}
.page-body form.form-border .form-field-btn span {
  font-size: 14px;
}
.page-body form.form-border .checkbox + .checkbox, .page-body form.form-border .radio + .radio {
  margin-top: 10px;
}
.page-body form.form-border input[type=radio], .page-body form.form-border input[type=checkbox] {
  transform: translateY(-4px);
}
.page-body form.form-border input[type=radio]:before, .page-body form.form-border input[type=checkbox]:before {
  border: 1px solid #ccc;
}
.page-body form.form-border div.checkbox label {
  margin: 0;
  color: inherit;
}
.page-body form.form-border .checkbox-label {
  width: 170px;
}
.page-body form.form-border .control-label, .page-body form.form-border label {
  color: inherit;
  font-weight: 400;
  text-transform: math-auto;
}
.page-body form.form-border button.btn {
  background: transparent;
  background-color: transparent !important;
  color: #444;
  box-shadow: none;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.page-body form.form-border .form-actions {
  text-align: end;
}
.page-body form.form-border .btn-primary:hover {
  background: var(--main-color);
  background-color: var(--main-color) !important;
  color: #fff;
}
.page-body form.form-border .btn-secondary:hover {
  color: #262626;
  border-color: #262626;
}
.page-body form.form-border .modal-footer {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: end;
}
.page-body form.form-border .modal-footer .btn {
  margin: 0 5px;
}
.page-body form.form-border .form-card {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  margin: 20px 0;
}
.page-body form.form-border .form-card h4 {
  margin-top: 0;
  margin-bottom: 0;
}
.page-body form.form-border .form-card .title {
  gap: 10px;
  font-size: 14px;
}
.page-body form.form-border .form-card .title .icon-book-line:before {
  color: #444;
}

.approval-flows-wrapper .side-menu {
  position: absolute;
  top: 0;
  left: 15px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: max-content;
  z-index: 1100;
}
.approval-flows-wrapper .side-menu a {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 5px;
  padding: 7px 12px;
  color: #444 !important;
  text-decoration: none;
}
.approval-flows-wrapper .side-menu a:hover {
  background-color: #f5f5f5;
  color: #262626;
}
.approval-flows-wrapper .btn-group.table-actions.active .side-menu {
  display: block;
}
.approval-flows-wrapper .flow-header {
  margin-bottom: 30px;
  padding: 0 20px;
}
.approval-flows-wrapper .flow-actions {
  margin-right: 15px;
  display: flex;
}
.approval-flows-wrapper .flow-actions a {
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #444;
}
.approval-flows-wrapper .flow-actions a.active-page {
  background: rgba(80, 222, 247, 0.3);
  color: #262626;
  border-color: transparent;
}
.approval-flows-wrapper .table.dataTable {
  border-radius: 10px;
  padding-bottom: 0;
  border-bottom-width: 1px !important;
  border-bottom-color: #ccc !important;
  border: 1px solid #ccc;
  border-bottom-width: unset;
  border-radius: 10px;
}
.approval-flows-wrapper .table > thead:first-child > tr:first-child > th {
  border: 0 !important;
}
.approval-flows-wrapper .table > thead:first-child > tr:first-child > th div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.approval-flows-wrapper .table > thead:first-child > tr:first-child > th div i::before {
  color: #262626;
}
.approval-flows-wrapper .dataTables_scrollHead {
  margin-bottom: 10px;
}
.approval-flows-wrapper .table-striped > tbody > tr:nth-of-type(odd) {
  background: transparent;
}
.approval-flows-wrapper .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
  border: 0;
  padding-bottom: 10px;
}
.approval-flows-wrapper .datatable_wrapper_box {
  padding-top: 0;
  margin-top: 0;
}
.approval-flows-wrapper .datatable_wrapper_box > .row {
  height: 0;
}
.approval-flows-wrapper .dataTables_wrapper .dataTables_scroll {
  padding: 1px;
}
.approval-flows-wrapper .btn-group.table-actions {
  line-height: 0;
}
.approval-flows-wrapper .btn-group.table-actions .icon-more-vertical {
  font-size: 22px;
  color: #ccc;
  cursor: pointer;
}
.approval-flows-wrapper table.dataTable tbody tr .side-menu a:not(.btn-primary):hover {
  color: #444 !important;
}

.approval-flows-wrapper .flow-title {
  margin: 0;
  font-size: 1.5em;
}
.approval-flows-wrapper .flow-status {
  font-weight: bold;
  color: #444;
  background: rgba(80, 222, 247, 0.5);
  padding: 8px 16px;
  border-radius: 20px;
}
.approval-flows-wrapper .flow-header .back-btn {
  line-height: 0;
  font-size: 22px;
  padding: 5px 10px;
}
.approval-flows-wrapper .flow-content {
  padding: 20px;
}
.approval-flows-wrapper .flow-content-item {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.approval-flows-wrapper .flow-content-item-title {
  font-weight: bold;
  margin-bottom: 10px;
}
.approval-flows-wrapper .flow-content-item-content {
  font-weight: bold;
  margin: 0 10px;
}
.approval-flows-wrapper .flex {
  display: flex;
}
.approval-flows-wrapper .items-center {
  align-items: center;
}
.approval-flows-wrapper .justify-space-between {
  justify-content: space-between;
}
.approval-flows-wrapper .gap-5 {
  gap: 5px;
}
.approval-flows-wrapper .gap-10 {
  gap: 10px;
}
.approval-flows-wrapper .flex-direction-column .value {
  color: #666;
  font-weight: 400;
  margin: 0 10px;
}
.approval-flows-wrapper .flex-direction-column .title {
  font-size: 14px;
}
.approval-flows-wrapper .flex-direction-column .title i {
  line-height: 1.4;
}
.approval-flows-wrapper .flex-direction-column .title i:before {
  color: #444;
}
.approval-flows-wrapper .flow-content-item-title {
  font-size: 15px;
}
.approval-flows-wrapper .flow-content-item-title .icon-book-line:before {
  color: #444;
  line-height: 1.3;
}

.approval-flows-wrapper .page-approval-flows-bar-content {
  width: 75vw;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  padding: 15px;
}
.approval-flows-wrapper .page-approval-flows-bar-content h4 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
}
.approval-flows-wrapper .page-approval-flows-bar-mask {
  width: 100vw;
  height: 100vh;
  background: #00000075;
  transition: transform 0.3s ease-in-out;
}
.approval-flows-wrapper .page-approval-flows-bar {
  z-index: 99999;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  transform: translateX(100%);
}
.approval-flows-wrapper .page-approval-flows-bar.open {
  transform: translateX(0);
}
.approval-flows-wrapper .page-approval-flows-bar h4 {
  font-size: 18px;
  font-weight: bold;
}
.approval-flows-wrapper .page-approval-flows-bar .icon-close {
  font-size: 20px;
}
.approval-flows-wrapper .page-bar-actions {
  margin-top: 10px;
}
.approval-flows-wrapper .page-bar-actions .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.powered-by-classera {
  display: flex;
  justify-content: center;
  margin: 10px 0px -20px 0;
  color: #999;
  font-weight: 400;
}

.minimize-sidebar .powered-by-classera {
  display: none;
}

.switch-version-container {
  margin-left: 15px;
}

.progress-bar-container-style1 {
  width: 100% !important;
  height: 40px !important;
  position: absolute !important;
  bottom: 12px !important;
  align-self: end;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.progress-bar-label-style1 {
  text-align: center;
  height: 10px;
  line-height: 20px;
  font-size: 14px;
  position: relative;
  bottom: 14px;
}

.progress-bar-container-style2 {
  width: 90%;
  background: #ddd;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-style1 {
  height: 100%;
  width: 0%;
  background: #51ddf7;
  transition: width 0.2s ease;
}

.pdf-notify1 {
  font-size: 16px;
  margin: 15px 0px 4px 0px;
  font-weight: 300;
  color: #009700;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.courses_library_wrapper .boxgrid .inner .cover.public-library-cover {
  cursor: pointer;
}
.courses_library_wrapper .boxgrid .inner .cover.public-library-cover .details {
  position: relative;
  z-index: 999;
}
.courses_library_wrapper .boxgrid .inner .cover.public-library-cover .Public-Library-Image::before {
  content: "";
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #fd995b;
  z-index: 1;
  transition: all 0.5s ease;
  outline: 0px solid var(--main-color);
  opacity: 0.9;
}
.courses_library_wrapper .boxgrid .inner .cover.public-library-cover .Public-Library-Image img {
  border-radius: 0;
  z-index: 2;
  background: border-box;
}
.courses_library_wrapper .boxgrid .inner .cover.public-library-cover .image {
  margin: 20px 0 15px 0px !important;
}
.courses_library_wrapper .boxgrid .inner .cover.public-library-cover .title_cover, .courses_library_wrapper .boxgrid .inner .cover.public-library-cover .details .msg {
  transition: all 0.5s ease;
}
.courses_library_wrapper .boxgrid .inner .cover.public-library-cover:hover .Public-Library-Image::before {
  outline-width: 500px;
  opacity: 0.8;
}
.courses_library_wrapper .boxgrid .inner .cover.public-library-cover:hover .title_cover {
  color: white !important;
}
.courses_library_wrapper .boxgrid .inner .cover.public-library-cover:hover .details .msg {
  color: white !important;
}

#addNewItem .editSubmit, #addNewItem.startEdit .createSubmit, #addNewItem .oldImage, #AddExtra .editSubmit, #AddExtra.startEdit .createSubmit {
  display: none;
}

#addNewItem.startEdit .editSubmit, #AddExtra.startEdit .editSubmit {
  display: inline-block;
}

.category_details .noResult {
  display: none;
  text-align: center;
}

.category .delete {
  font-size: 21px;
  color: #f26b6b;
  width: 22px;
  height: 23px;
  cursor: pointer;
  margin-top: 12px;
}

.extrasOfProduct li {
  list-style: none;
  background: #fff;
  display: inline-block;
  padding: 7px 15px;
  border-radius: 25px;
  border: 1px solid var(--main-color);
  color: #666;
}

.addExtraToProduct .extrasOfProductBox {
  display: none;
}

.canteenWallet .categoriesList .category, .canteenWallet .productsList .item {
  border-radius: 5px;
  text-align: center;
  border: 1px solid #eee;
  margin: 6px 4px;
  position: relative;
  cursor: pointer;
}
.canteenWallet .categoriesList .category.disabled, .canteenWallet .productsList .item.disabled {
  pointer-events: none;
}
.canteenWallet .categoriesList .category.disabled:after, .canteenWallet .productsList .item.disabled:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dadada96;
}

.canteenWallet {
  /* End categoriesList */
  /* End productsList */
  /* End canteensListWrapper */
  /* End basketCart */
}
.canteenWallet .categoriesList {
  margin: 0;
}
.canteenWallet .categoriesList > div {
  padding: 0;
}
.canteenWallet .categoriesList img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin-top: 0;
}
.canteenWallet .productsList {
  display: none;
  margin: 0;
}
.canteenWallet .productsList > div {
  padding: 0;
}
.canteenWallet .productsList .productDetails {
  display: none;
}
.canteenWallet .productsList h3 {
  padding: 11px 0px;
  margin: 0;
  font-size: 16px;
  position: relative;
  min-height: 55px;
  box-sizing: content-box;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.4;
  max-height: 55px;
}
.canteenWallet .productsList .item {
  text-align: center;
  position: relative;
  height: 170px;
  margin: 0;
  padding: 0 !important;
  border-radius: 25px;
  overflow: hidden;
}
.canteenWallet .productsList img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: none;
  object-fit: contain;
  margin-top: 0;
}
.canteenWallet .canteensListWrapper .productsList img {
  width: 100%;
  height: 100%;
  margin-top: 8px;
}
.canteenWallet .canteensListWrapper .productsList .item {
  height: 230px;
  cursor: unset;
}
.canteenWallet .basketCart {
  display: inline-block;
  position: relative;
  top: 7px;
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: top;
  border-radius: 5px;
  padding: 0 0 21px;
  box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.25);
  margin-bottom: 15px;
}
.canteenWallet .basketCart .cartHeader {
  background: #66bb69;
  margin-top: 0;
  padding: 10px 2px;
  color: #fff;
  margin-bottom: 5px;
  text-align: center;
}
.canteenWallet .basketCart .proceed {
  color: #66bb68;
  border: 1px solid #66bb68;
  padding: 8px;
  min-width: 88%;
  transition: all ease-in-out 0.2s;
}
.canteenWallet .basketCart .proceed:hover {
  color: #fff;
  background: #66bb68;
}
.canteenWallet .searchBox {
  width: 100%;
  position: relative;
  margin: 9px auto;
  margin-bottom: 10px;
}
.canteenWallet .searchBox i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* End canteenWallet */
.category.opened i.opened, .category i.closed, .canteenWallet .category.opened .productsList {
  display: block;
}

.category i.opened, .category.opened i.closed {
  display: none;
}

.canteenWallet .productsList .imgBox {
  display: block;
  text-align: center;
  vertical-align: top;
  margin-bottom: 7px;
  height: 100%;
}

.canteenWallet .productsList .productData {
  text-align: center;
}

.productsList .productActions {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  vertical-align: top;
  padding-top: 5px;
}

.productsList .productActions .add {
  color: #66BB6A;
  font-size: 19px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.canteenWallet .categoriesList .productData h3 {
  border-bottom: 0;
}

.extrasOfProductList {
  border-top: 1px solid #ddd;
  margin-top: 10px;
  padding-top: 10px;
}

#productDetails input[type=checkbox] {
  margin: 5px;
  vertical-align: middle;
}

#productDetails .productData {
  width: calc(100% - 170px);
  display: inline-block;
  vertical-align: middle;
}

#productDetails .productPrice {
  font-size: 14px;
  display: inline-block;
  width: 87px;
}

#productDetails .productPrice span {
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}

#productDetails .productCount {
  max-width: 70px;
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 0 7px;
}

#productDetails .productCount i {
  padding: 5px;
  font-size: 12px;
  color: #3dcfde;
  cursor: pointer;
}

#productDetails .productDescription {
  color: #777;
}

#productDetails .extrasOfProductList .checkbox {
  display: inline-block;
}

.canteenModal {
  z-index: 9999999999;
}

.cartList .product {
  background: #fff;
  padding: 7px 2px;
  margin-bottom: 2px;
}

.cartList .product span {
  padding: 2px;
}

.cartList .product .productCountOrder {
  background: #fff;
  border-radius: 5px;
  margin-top: 1px;
  display: inline-block;
  border: 1px solid #ddd;
  padding: 2px 5px !important;
}

.cartList .productNameOrder {
  word-break: break-all;
  display: inline-block;
  max-width: 110px;
  vertical-align: top;
  padding: 0 7px;
}

.deleteProductFromCart {
  color: #ff4f5f;
  font-size: 15px;
}

.editProductFromCart {
  font-size: 14px;
  color: var(--main-color);
}

.cartList .productActions i {
  margin: 0 4px;
}

#productDetails.startEdit .saveOrder, #productDetails .editOrder {
  display: none;
}

#productDetails.startEdit .editOrder {
  display: inline-block;
}

#cardNumberModal .canteenCheckoutByCategoriesBtn, #cardNumberModal #cardNumberModal.byCategories .canteenCheckoutBtn {
  display: none;
}
#cardNumberModal.byCategories.acceptView .canteenCheckoutByCategoriesBtn {
  display: inline-block;
}
#cardNumberModal.cameraScannerOpend .selectStudentByCamera .openBtn {
  display: none;
}
#cardNumberModal.cameraScannerOpend .selectStudentByCamera .closeBtn {
  display: inline-block;
}
#cardNumberModal.acceptView .selectStudentByCamera {
  display: none;
}

/*@media screen and (max-width: 1128px ) and (min-width: 705px){
    .cartList .productActions{
        float: none !important;
        display: block;
        text-align: center;
    }
}*/
@media screen and (max-width: 705px) {
  #productDetails .productPrice {
    float: right;
  }

  #productDetails .productData {
    width: 100%;
  }

  .canteenWallet .basketCart {
    /*width: 100%;*/
    position: relative;
    display: block;
  }

  /*   .canteenWallet .categoriesList , .canteenWallet .productsList{
         width: 100%;
     }*/
}
#categories.catogryDetailsOpened .categoriesList, #categories .productsList {
  display: none;
}

#categories.catogryDetailsOpened .productsList {
  display: block;
}

.canteenWallet .categoriesList .category h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
}

.backToCatogriesList {
  float: left;
}

.backToCatogriesList, .backToCanteensList {
  color: var(--main-color);
  font-size: 16px;
  font-weight: bold;
  display: none;
}
.backToCatogriesList:hover, .backToCanteensList:hover {
  color: #33c1cf;
}
.backToCatogriesList i, .backToCanteensList i {
  margin: 0 5px;
}

.catogryDetailsOpened .backToCatogriesList {
  display: block;
}

.canteensListWrapper #categories.catogryDetailsOpened .backToCatogriesList, .canteensListWrapper .backToCanteensList {
  display: inline-block;
  float: none;
}

.addExtraToProduct .listOfExtras {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px 10px;
}
.addExtraToProduct .listOfExtras .checkbox {
  display: grid;
  margin: 0;
  grid-template-columns: auto auto;
  justify-content: left;
  grid-gap: 15px 15px;
}
.addExtraToProduct .listOfExtras .checkbox label {
  margin: 0;
}

#productDetails .extrasOfProductList .checkbox .extraPriceLabel {
  unicode-bidi: bidi-override !important;
  direction: ltr;
}

.category_details .item .delete, .category_details .item .edit {
  position: absolute;
  left: 20px;
  bottom: 28px;
  font-size: 21px;
  color: #f26b6b;
  width: 22px;
  height: 23px;
  cursor: pointer;
  text-align: center;
}

.category_details .item .edit {
  right: auto;
  right: 20px;
  color: var(--main-color);
}

.extrasOfProduct li i {
  font-size: 15px;
  color: #f26b6b;
  padding-right: 9px;
}

.productsList .productData p {
  color: #777;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: nowrap;
  min-height: 22px;
}

.canteenWallet .basketCart {
  left: -5px;
  /*float: $right;*/
  margin-top: 12px;
}

.cartList .product {
  text-align: right;
}

.cartList .productActions {
  float: left;
}

.canteenWallet .categoriesList .category {
  height: 180px;
  overflow: hidden;
  border-radius: 5px;
  border: 0 !important;
}
.canteenWallet .categoriesList .category .imgBox {
  height: 100%;
}

#categories.catogryDetailsOpened .productsList {
  float: right;
}

.canteensListWrapper #categories .productsList {
  width: 100%;
}

/* ***** wallet ******/
.wallet_header .icon img {
  width: 39px;
}

.wallet_header .icon {
  float: right;
}

.my_wallet_wrapper {
  background: #fff;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  min-height: 300px;
  box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.25);
}
.my_wallet_wrapper .screenBtn {
  float: left;
}
.my_wallet_wrapper .normalScreenBtn {
  display: none;
}
.my_wallet_wrapper.canteenEmployeeHome {
  max-width: 100%;
}
.my_wallet_wrapper.canteenEmployeeHome.fullScreen {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3333333333;
  left: 0;
  overflow-y: auto;
}
.my_wallet_wrapper.canteenEmployeeHome.fullScreen .normalScreenBtn {
  display: block;
}
.my_wallet_wrapper.canteenEmployeeHome.fullScreen .fullScreenBtn {
  display: none;
}

.wallet_header {
  background: linear-gradient(90deg, #a6a7ab 0%, #859398 100%);
  padding: 6px 30px;
}

.my_wallet_wrapper .stuList {
  float: left;
}

.my_wallet_wrapper .stuList h3 {
  margin-top: 7px;
  color: #fff;
  font-size: 19px;
}

.my_wallet_wrapper .stuList h3 img {
  width: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  margin-left: 9px;
}

.my_wallet_wrapper .tab-content, .canteenModal .tab-content {
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin-top: -6px;
}

.my_wallet_wrapper .nav-tabs, .canteenModal .nav-tabs {
  width: 100%;
  margin-top: 10px;
  border-bottom: 1px solid #ddd;
  background: transparent;
}

.my_wallet_wrapper .nav-tabs > li.active > a, .my_wallet_wrapper .nav-tabs > li.active > a:hover, .my_wallet_wrapper .nav-tabs > li.active > a:focus {
  color: var(--main-color);
  margin-top: 1px;
  border: 0 !important;
  box-shadow: none !important;
  background-color: transparent;
}

.canteenModal .nav-tabs > li.active > a, .canteenModal .nav-tabs > li.active > a:hover, .canteenModal .nav-tabs > li.active > a:focus {
  background: transparent;
  box-shadow: none !important;
  border-bottom: 2px solid var(--main-color);
  border-top: 0;
}

.wallet_body .charge {
  float: left;
  padding: 0 8px 10px;
}

.wallet_header h2 {
  display: inline-block;
  margin-top: 9px;
  color: #fff;
  margin-right: 25px;
  font-size: 20px !important;
}

.my_wallet_wrapper .nav-tabs > li > a {
  font-size: 15px;
}

.my_wallet_wrapper .stuList .dropdown-menu {
  border-radius: 4px !important;
  background: #fafafa;
  border: 0 !important;
  box-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.25);
}

.my_wallet_wrapper .stuList .dropdown-menu:before {
  content: "";
  position: absolute;
  top: -7px;
  left: 5px;
  border-color: #fafafa transparent;
  border-style: solid;
  border-width: 0px 7px 7px 7px;
  height: 0px;
  width: 0px;
}

.my_wallet_wrapper .stuList .dropdown-menu li a {
  padding: 5px 10px;
}

.my_wallet_wrapper .stuList .dropdown-menu li img {
  width: 25px;
  border-radius: 50%;
  margin-left: 10px;
}

.my_wallet_wrapper .noResult {
  width: 100%;
  text-align: center;
  color: #777;
  font-size: 22px;
  display: none;
  margin-top: 30px;
}

#chargeModal .modal-dialog, #cardNumberModal .modal-dialog {
  border-radius: 25px;
}

#chargeModal .modal-content, #cardNumberModal .modal-content {
  background: #f3f3f3;
}

.paymentDetails .wallet_body .title {
  padding: 3px 20px 0;
  margin-bottom: 4px;
  color: #444;
}

.paymentDetailsContent .successMessage, .paymentDetailsContent .failedMessage, .paymentDetailsContent .pendingMessage {
  display: none;
}

.paymentDetailsContent .icon {
  font-size: 6em;
  text-align: center;
  display: block;
}

.paymentDetailsContent .failedMessage {
  color: #ff4f5f;
}

.paymentDetailsContent .successMessage {
  color: #A5D6A7;
}

.paymentDetailsContent .pendingMessage {
  color: #FFE57F;
}

.paymentDetailsContent h1 {
  text-align: center;
  margin: 10px 0 20px;
}

.paymentDetails .detailsHeader p {
  display: inline-block;
  font-size: 14px;
  color: #777;
  margin-bottom: 0;
}

.paymentDetails .detailsHeader p span {
  color: var(--main-color);
}

.paymentDetails .detailsHeader {
  float: left;
}

.paymentDetails .responseMessage {
  text-align: center;
  color: #999;
}

.paymentDetailsContent {
  padding-bottom: 40px;
}

.backToWallet {
  border: 0;
  box-shadow: none;
  color: var(--main-color);
  font-size: 14px;
  margin: 0;
  padding: 0 17px;
}

.backToWallet:hover {
  color: #444;
}

.my_wallet_wrapper .loading {
  text-align: center;
}

@media screen and (max-width: 390px) {
  .wallet_body .charge {
    float: none;
    padding: 0 14px 10px 10px;
  }

  .my_wallet_wrapper .stuList h3 {
    font-size: 15px;
  }

  .wallet_header h2 {
    margin-right: 2px;
    font-size: 15px !important;
  }
}
.canteenWallet .wallet_body {
  padding: 10px 20px;
}

.my_wallet_wrapper .control-label {
  color: #444;
}

.my_wallet_wrapper #payNow {
  display: block;
  margin: 0 auto;
  min-width: 100px;
  border-radius: 25px;
  box-shadow: 0 4px 10px -1px rgba(0, 0, 0, 0.25);
  margin-bottom: 17px;
}

#cardNumberModal video {
  width: 100%;
}
#cardNumberModal .preview-container {
  position: relative;
  width: 100%;
  height: 100%;
}
#cardNumberModal .preview-container:before {
  content: "";
  display: block;
  width: 90%;
  height: 90%;
  max-width: 300px;
  max-height: 300px;
  position: absolute;
  border: 5px dashed #FFF;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 999999;
  border-radius: 10px;
}
#cardNumberModal li {
  list-style: none;
}
#cardNumberModal .getUserData {
  display: inline-block;
}
#cardNumberModal.acceptView .notAcceptUser, #cardNumberModal.acceptView .canteenCheckoutBtn {
  display: inline-block;
}
#cardNumberModal.acceptView .cardNumberBox,
#cardNumberModal.acceptView .getUserData {
  display: none;
}
#cardNumberModal.acceptView .userDataBox {
  display: block;
}
#cardNumberModal.acceptView .userDataBox {
  text-align: center;
  color: #444;
}
#cardNumberModal.addStuManualStatus .notAcceptUser {
  display: none;
}
#cardNumberModal .stuImage {
  border-radius: 25px;
  width: 200px;
  height: 200px;
}
#cardNumberModal .cardNumberWrong {
  display: none;
  color: #ff4f5f;
  text-align: center;
}
#cardNumberModal .modal-footer {
  text-align: center;
  direction: rtl;
}
#cardNumberModal #cardNumber.HasValue {
  animation: inputFocus 1s alternate linear;
}
#cardNumberModal .modal-body {
  padding-top: 0;
}

#cardNumberManualModal .stuImage {
  border-radius: 25px;
  width: 200px;
  height: 200px;
}
#cardNumberManualModal .userDataBox {
  text-align: center;
  color: #444;
}

.my_wallet_wrapper .log {
  padding: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid #ddd;
}

.my_wallet_wrapper .log td {
  padding: 10px 4px;
}

#paymentList .log .Success {
  color: #A5D6A7;
}

#paymentList .log .Failed {
  color: #ff4f5f;
}

#paymentList .log:before {
  color: #ff9800;
  content: "\f06a";
}

#paymentList .log.Success:before {
  color: #A5D6A7;
  content: "\f00c";
}

#paymentList .log.Failed:before {
  content: "\f00d";
  color: #ff4f5f;
}

#exchangeList .log.plus:before {
  color: #A5D6A7;
  content: "\f067";
}

#exchangeList .log.minus:before {
  content: "\f068";
  color: #ff4f5f;
}

#paymentList .log:before, #exchangeList .log:before {
  font-family: FontAwesome;
  font-size: 15px;
  margin-top: 6px;
  position: relative;
  top: 15px;
  right: 17px;
}

#exchangeList .log:before {
  font-size: 13px;
}

.my_wallet_wrapper table {
  width: 100%;
}

.my_wallet_wrapper td, .my_wallet_wrapper th {
  text-align: center;
}

.my_wallet_wrapper th {
  padding: 10px 4px;
  font-weight: bold;
  font-size: 14px;
  background: #eee;
}

.my_wallet_wrapper table {
  display: none;
}

.my_wallet_wrapper .showMore {
  display: none;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
}

.my_wallet_wrapper .showMore:hover {
  color: var(--main-color);
}

@media screen and (max-width: 550px) {
  #paymentList .log:before, #exchangeList .log:before {
    right: 7px;
  }

  .my_wallet_wrapper td {
    font-size: 12px;
  }
}
.scannerWrapper .noCameras {
  display: none;
}

.scannerWrapper .switch-cam {
  margin-bottom: 8px;
}

#cardNumberModal .maskModal {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.backToWallet:active {
  box-shadow: none;
}

.paymentDetailsContent .date {
  text-align: center;
  color: #777;
}

.paymentDetails .reference_no {
  display: none;
  text-align: center;
  color: #777;
}

.canteenCategories .categoryBox, .category_details .itemBox {
  min-width: 250px;
}

#makeOrderBody .canteenCategories .category .imgBox {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.oldCategoryImg {
  margin-top: 20px;
  overflow: hidden;
}

.oldCategoryImg img {
  border-radius: 10px;
  object-fit: contain;
  max-height: 150px;
}

.walletpackagesList .packegBox {
  display: inline-block;
  background: #fff;
  padding: 15px 20px;
  border-radius: 10px;
  text-align: center;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 2px solid #37cede;
  margin: 5px 10px;
  width: 170px;
}

.walletpackagesList {
  text-align: center;
}

.walletpackagesList .packagePrice {
  background: linear-gradient(90deg, #5B86E5 0%, #36D1DC 100%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 22px 5px;
  margin: 0 auto 25px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}

.walletpackagesList .packegBox h4 {
  color: #333;
}

.walletpackagesList .packegBox p {
  color: #666;
}

#getUserWalletInfo {
  text-align: center;
}

.canteenWallet #makeOrderBody, .canteenWallet.makeOrder #getUserWalletInfo {
  display: none;
}

.canteenWallet.makeOrder #makeOrderBody {
  display: block;
}

#getUserWalletInfo h3 {
  color: #444;
  margin-bottom: 25px;
}

#getUserWalletInfo .infoIcon {
  font-size: 4em;
  color: #444;
  margin: 20px 0 0;
  padding: 15px;
  border-radius: 50%;
  border: 1px solid #9aa0a4;
  width: 85px;
  height: 85px;
}

.canteenWallet .wallet_header p {
  margin: 5px 10px 0;
  color: #fff;
  display: none;
  font-weight: bold;
}
.canteenWallet .wallet_header p.stuInfoView {
  display: inline-block;
}

.canteenWallet .wallet_header p span {
  font-weight: 300;
}

.canteenWallet .wallet_header .stu_img {
  width: 30px;
  border-radius: 50%;
  margin-top: 5px;
  display: none;
}

.canteenWallet.makeOrder .wallet_header .stu_img, .canteenWallet.makeOrder .wallet_header p {
  display: inline-block;
}

@media (min-width: 1000px) {
  #chargeModal .modal-dialog {
    min-width: 900px;
  }
}
@media (max-width: 430px) {
  .walletpackagesList .packegBox {
    width: 100%;
  }

  .canteenWallet .wallet_header p {
    margin-top: 10px;
  }
}
#cardNumberModal.read .preview-container:before {
  border-color: #a5dc86;
  transition: ease-in-out 0.4s;
}

#cardNumberModal .successRead {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 999999;
  color: #a5dc86;
  transition: ease-in-out 0.4s;
  font-size: 7em;
}

#cardNumberModal.read .successRead {
  display: block;
}

#cardNumberModal2.read .preview-container:before {
  border-color: #a5dc86;
  transition: ease-in-out 0.4s;
}

#cardNumberModal2 .successRead {
  display: none;
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 999999;
  color: #a5dc86;
  transition: ease-in-out 0.4s;
  font-size: 7em;
}

#cardNumberModal2.read .successRead {
  display: block;
}

#chargeModal .messageError, #transferModal .messageError {
  text-align: center;
  color: #ff4f60;
}

.canteenCategories .categoryBox, .category_details .itemBox {
  min-width: 250px;
}

.category_details .itemBox .price {
  display: block;
}
.category_details .itemBox .price label {
  margin-bottom: 13px;
  margin-right: 5px;
  font-size: 15px;
}

#addNewItem .chosen-container {
  width: 100% !important;
}

.multipleSelectWraper {
  position: relative;
}

.multipleSelectWraper .selectMultibleBtn {
  position: absolute;
  right: 10px;
  top: 0px;
  box-shadow: none;
  padding: 5px 17px;
  font-size: 13px;
}

.multipleSelectWraper .selectMultibleBtn[disabled] {
  opacity: 0.4;
}

.multipleSelectWraper .listToChoose {
  position: absolute;
  max-height: 150px;
  overflow-y: auto;
  padding: 0px;
  background: #fff;
  width: 91%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  border: 1px solid #dedede;
  border-top: 0;
}

.multipleSelectWraper .listToChoose li {
  list-style: none;
  padding: 4px 14px;
  border-bottom: 1px solid #eee;
}

.multipleSelectWraper .listToChoose li:hover {
  background: #fff;
}

.multipleSelectWraper .listToAdded {
  position: relative;
  margin-top: 10px;
}

.multipleSelectWraper .listToAdded li {
  list-style: none;
  display: inline-block;
  border-radius: 25px;
  padding: 5px 7px;
  padding-right: 20px;
  color: var(--main-color);
  position: relative;
  font-size: 12px;
  margin: 0 2px;
  border: 1px solid;
}

.multipleSelectWraper .listToAdded li span {
  position: absolute;
  right: 5px;
  top: 5px;
  color: #c1c1c1;
  font-size: 14px;
}

.multipleSelectWraper .listToAdded li span:hover {
  color: var(--main-color);
}

.canteenModal .editTitle, .canteenModal.startEdit .addTitle {
  display: none;
}

.canteenModal.startEdit .editTitle {
  display: block;
}

.sunAllergies li, .sunProducts li {
  list-style: none;
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: ease 0.3s;
  color: #444;
  font-size: 14px;
  margin: 7px 0;
  cursor: pointer;
}

.sunAllergies li.blocked, .sunProducts li.blocked {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

.my_wallet_wrapper #custom-btn-link {
  color: white !important;
  font-size: 13px !important;
  display: inline-block !important;
  border-radius: 2px !important;
  padding: 6px 12px !important;
}

.walletActionsBtns {
  float: right;
}

.selectAllergyLabel .stuName {
  font-weight: bold;
  font-size: 16px;
  color: #444;
}

/*
.addAndDetailsItemsBtn{
  position: absolute;
  width: 110px;
  font-size: 14px;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  background: #eee;
  border-radius: 5px;
  color: #66bb68;
  padding: 7px 10px;
  display: none;
}

.addAndDetailsItemsBtn:after {
  height: 3px;
  width: 7px;
  position: absolute;
  content: '';
  top: -8px;
  left:50%;
  transform:translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #66bb68;
}
.addAndDetailsItemsBtn:before {
  height: 3px;
  width: 0;
  position: absolute;
  content: '';
  bottom: 0;
  background: #66bb68;
  left:0;
  animation-name: canteenAddItemAnimation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}


@-webkit-keyframes canteenAddItemAnimation {
  from{
    width: 0;
  }
  to{
    width: 100%;
  }
}*/
.canteenCategories {
  width: 80%;
  margin: 0 auto;
}
.canteenCategories .category {
  position: relative;
}
.canteenCategories .category .btn {
  display: block;
  margin: 10px auto 5px;
  border-radius: 25px;
  width: 100px;
  position: static;
}
.canteenCategories .category .btn:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

.addItemWithExtra {
  display: inline-block;
  color: var(--main-color);
  font-size: 13px;
  border-radius: 5px;
  margin-top: 0;
  border: 1px solid var(--main-color);
  right: 12px;
  bottom: 12px;
  padding: 3px;
  position: absolute;
}

.canteenModal .charcterLimitNote {
  font-size: 12px;
  color: #777;
  margin-bottom: 6px;
  display: block;
}

.canteen-reports .filter {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  height: 265px;
  overflow-y: auto;
  margin-bottom: 30px;
}
.canteen-reports .filter:not(:first-child) {
  display: none;
}
.canteen-reports .filter .block-title {
  background: #fff;
  font-size: 17px;
  margin: 0 0 10px 0;
  padding: 15px 5px;
  position: relative;
}
.canteen-reports .filter .block-title:before {
  height: 2px;
  width: 38px;
  position: absolute;
  content: "";
  right: 2px;
  bottom: 0;
  background: var(--main-color);
}
.canteen-reports .filter input[type=text] {
  padding: 7px;
  display: block;
  width: 90%;
  margin: 8px auto;
  background: #fff;
  border-radius: 3px;
}
.canteen-reports .filter .preload {
  text-align: center;
}
.canteen-reports .filter ul::-webkit-scrollbar {
  background-color: transparent;
  border-radius: 10px;
  width: 8px;
}
.canteen-reports .filter ul::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.55);
  border-radius: 5px;
}
.canteen-reports .filter ul li {
  display: block;
  font-size: 14px;
  color: #444;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
  border-radius: 4px;
  text-transform: capitalize;
  position: relative;
}
.canteen-reports .filter ul li:hover {
  background: #eee !important;
  color: #444 !important;
}
.canteen-reports .filter ul li.selected {
  background: var(--main-color) !important;
  color: #fff !important;
}

span.itemInfo, .canteensListWrapper span.itemInfo {
  font-size: 15px;
  margin: 4px;
  border-radius: 50%;
  width: 25px;
  padding: 4px;
  height: 25px;
  position: absolute;
  left: 8px;
  bottom: 12px;
  color: #fff;
  transition: ease-in-out 0.3s;
  background: var(--main-color);
}
span.itemInfo:hover, .canteensListWrapper span.itemInfo:hover {
  color: #ccc;
}

.productsList .item .itemActionsBox {
  display: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  transition: all ease 1s;
  opacity: 0;
  height: 100%;
  background: linear-gradient(2deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.02) 100%);
  border-radius: 25px;
}
.productsList .item:hover .itemActionsBox {
  display: block;
  opacity: 1;
}

.canteensListWrapper span.itemInfo {
  cursor: pointer;
}

#productInfoModal .hidden-print {
  display: none !important;
}

#canteensList .canteens li {
  list-style: none;
  padding: 9px 20px;
  cursor: pointer;
  background: #eee;
  border: 1px solid #eee;
  margin: 7px auto;
  border-radius: 7px;
  color: #444;
  transition: ease-in-out 0.3s;
  cursor: pointer;
}
#canteensList .canteens li:hover {
  background: #fff;
}

.itemWrapperBox {
  padding: 5px;
  min-width: 187px;
}

#cardNumberModal.modal, .canteenModal.modal {
  z-index: 44444444444;
}

#selectStudentManualWrapper {
  margin: 0 auto;
  width: 70%;
  min-width: 280px;
}
#selectStudentManualWrapper > * {
  margin: 15px 0;
}
#selectStudentManualWrapper .or {
  position: relative;
  text-align: center;
  color: #444;
}
#selectStudentManualWrapper .or:before, #selectStudentManualWrapper .or:after {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 48%;
  /*transform: translateX(-50%);*/
  background: #ddd;
  content: "";
}
#selectStudentManualWrapper .or:after {
  left: auto;
  right: 0;
}

.canteenEmployeeHome .cameraErrMsg {
  margin-top: 6px;
  color: #e5301c;
}

.canteen-tab-content.tab-content {
  box-shadow: none;
}
.canteen-tab-content.tab-content .error_messge {
  text-align: center;
  font-size: 14px;
  color: #e5301c;
}

.canteen_reports_tables {
  width: 100% !important;
}
.canteen_reports_tables input {
  width: 100%;
}

.canteen_from_loader {
  position: relative;
}
.canteen_from_loader img {
  position: absolute;
  width: 40px;
  height: 40px;
  background-size: contain;
  transform: translateX(-50%);
  left: 50%;
}

#transferStudents {
  display: grid;
  grid-template-columns: auto auto auto;
}
#transferStudents li {
  list-style: none;
  padding: 5px;
}
#transferStudents li a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #444;
  background: #fafafa;
  padding: 10px;
  border-radius: 5px;
  border: 2px solid transparent;
  transition: ease-in-out all 0.3s;
  text-decoration: none;
}
#transferStudents li a:hover {
  background: #fff;
  border-color: #eee;
}
#transferStudents li a.selected {
  background: #fff;
  border-color: var(--main-color);
}
#transferStudents li img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 10px;
}

.receipt-print--page .receipt-print--page {
  max-width: 800px;
  margin: auto;
  min-height: 70vh;
  position: relative;
  z-index: 20;
  font-size: 16px;
  padding: 30px;
}
.receipt-print--page .receipt-print--page h1 {
  margin-bottom: 50px;
}
.receipt-print--page .receipt-print--page:after {
  content: "";
  background: url("/img/canteen_report_bg.jpg") center center no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.1;
}
.receipt-print--page .receipt__header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
}
.receipt-print--page .receipt__header .receipt__time,
.receipt-print--page .receipt__header .receipt__information {
  flex-basis: 45%;
}
.receipt-print--page .receipt__header .date,
.receipt-print--page .receipt__header .time,
.receipt-print--page .receipt__header .from,
.receipt-print--page .receipt__header .to {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.receipt-print--page .receipt__header label {
  font-weight: bold;
  font-size: 16px;
  margin: 0 15px 0;
  min-width: 50px;
}
.receipt-print--page .extra_item {
  background-color: #ddd;
}
.receipt-print--page tr.extra_item td:first-child {
  padding-left: 20px;
  padding-right: 20px;
}

.scan-student-tab-box {
  background: #fff;
  position: relative;
  border-radius: 15px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.scan-student-tab-box .scan-student-tab-content {
  background: url(/img/canteen/food-memship-bg.png) no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 0;
  border-radius: 15px;
}
.scan-student-tab-box .scan-head-label, .scan-student-tab-box .or-label {
  text-align: center;
  font-weight: 400 !important;
  font-size: 24px !important;
  font-size: max(1.3vw, 14px) !important;
  position: absolute;
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
}
@media screen and (max-width: 1045px) {
  .scan-student-tab-box .scan-head-label {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
  }
}
.scan-student-tab-box .or-label {
  top: 50%;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
@media screen and (min-width: 1050px) {
  .scan-student-tab-box .or-label {
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 1045px) {
  .scan-student-tab-box .or-label {
    width: 50px;
    height: 50px;
    position: relative;
  }
}
.scan-student-tab-box .scan-components-wrapper {
  display: grid;
  text-align: center;
  min-height: 600px;
  min-height: min(600px, 75vh);
  border-radius: 15px;
}
@media screen and (min-width: 1050px) {
  .scan-student-tab-box .scan-components-wrapper {
    grid-template-columns: 50% 50%;
  }
}
.scan-student-tab-box .scan-student-grid-box {
  padding: 15px 40px;
  padding-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 550px) {
  .scan-student-tab-box .scan-student-grid-box {
    padding-top: 50px;
  }
}
.scan-student-tab-box .scan-student-grid-box .scan-stu-card-btn {
  width: 100%;
  border-radius: 25px;
  height: 50px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.scan-student-tab-box .scan-student-grid-box .face-id-stu {
  width: 100%;
  border-radius: 25px;
  height: 50px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.scan-student-tab-box .scan-student-grid-box .card-id-form input {
  margin: 0;
  height: 50px;
}
.scan-student-tab-box .scan-student-grid-box .card-id-form button {
  margin-top: 15px;
  border-radius: 25px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  padding: 8px 25px;
}
.scan-student-tab-box .scan-student-grid-box .form-fields-wrapper {
  max-width: 400px;
  flex: 1;
  min-height: 120px;
}
.scan-student-tab-box .scan-by-card-id-box {
  background: rgba(0, 0, 0, 0.1);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
@media screen and (max-width: 550px) {
  .scan-student-tab-box .scan-by-card-id-box {
    border-radius: 15px;
  }
}

.purchase-procees-page-wrapper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.purchase-procees-page-wrapper:not(.in-make-order-page) {
  background: #fff;
  position: relative;
  border-radius: 15px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.purchase-procees-page-wrapper h3 {
  font-weight: 500 !important;
  margin-top: 10px;
  font-size: 18px;
}
.purchase-procees-page-wrapper .btn-primary, .purchase-procees-page-wrapper .closeModal {
  border-radius: 25px;
}
.purchase-procees-page-wrapper .payment-btn {
  border-radius: 25px;
  background-color: #66BB6A;
  border-color: #66BB6A;
  color: #fff;
  padding: 3px 15px;
  position: relative;
  padding-right: 35px;
}
.purchase-procees-page-wrapper .payment-btn i {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8em;
}
.purchase-procees-page-wrapper .purchase-content {
  padding: 15px;
  flex: 1;
  min-width: 60%;
}
.purchase-procees-page-wrapper .cart-wrapper {
  border-right: 1px solid #eee;
  padding: 15px;
  flex: 1;
}
@media screen and (min-width: 400px) {
  .purchase-procees-page-wrapper .cart-wrapper {
    min-width: 300px;
  }
}
@media screen and (max-width: 1050px) {
  .purchase-procees-page-wrapper .cart-wrapper {
    border-right: 0;
  }
}
.purchase-procees-page-wrapper .cart-wrapper .cart-header-title {
  display: flex;
  align-items: center;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-header-title i {
  margin-left: 15px;
  font-size: max(2vw, 24px);
  color: var(--main-color);
}
.purchase-procees-page-wrapper .cart-wrapper .cart-no-results {
  display: block;
  text-align: center;
  padding-top: 30%;
  color: #aeaeae;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items li:last-child {
  border-bottom: 0;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items .cart-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items .cart-actions .cart-action {
  margin: 8px 0 0;
  cursor: pointer;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items .cart-actions .cart-action i {
  font-size: 18px;
  margin-left: 7px;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items .cart-actions .cart-action.item-edit {
  color: var(--main-color);
  margin-left: 10px;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items .cart-actions .cart-action.item-delete {
  color: #e5301c;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items .cart-actions .price {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items .cart-item-title {
  flex: 1;
  padding: 0 10px;
  display: flex;
  align-items: center;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-around;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items .cart-item-title h5 {
  margin: 5px 0 0;
  font-weight: 500 !important;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items .cart-item-actions-and-price .price {
  text-align: left;
  font-weight: 500;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items .cart-item-img img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ddd;
  object-fit: cover;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-items-wrapper {
  min-height: calc(100vh - 350px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-checkout-wrapper {
  margin-top: 20px;
}
.purchase-procees-page-wrapper .cart-wrapper .cart-checkout-wrapper .preceed-checkout-btn {
  width: 100%;
  padding: 10px;
  font-size: 14px;
}
.purchase-procees-page-wrapper .canteen-content-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  min-height: 70px;
}
.purchase-procees-page-wrapper .canteen-content-nav .user-info {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}
.purchase-procees-page-wrapper .canteen-content-nav .user-info .userName {
  font-weight: 500;
  margin: 0;
  font-size: 14px;
}
.purchase-procees-page-wrapper .canteen-content-nav .user-info img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #eee;
  margin-left: 15px;
}
.purchase-procees-page-wrapper .canteen-content-nav .canteen-nav-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.purchase-procees-page-wrapper .canteen-content-nav .canteen-nav-actions .userWalletInfo {
  margin: 12px;
  font-size: 14px;
}
.purchase-procees-page-wrapper .canteen-content-nav .canteen-nav-actions .userWalletInfo span {
  margin: 0 6px;
}
.purchase-procees-page-wrapper #CanteenPurchaseRoot .content-loader {
  display: block;
  margin: 0 auto;
  max-width: 70%;
}
.purchase-procees-page-wrapper .canteen-items-list {
  display: flex;
  flex-wrap: wrap;
}
.purchase-procees-page-wrapper .canteen-items-list .canteen-item {
  padding: 20px;
  min-width: 350px;
  cursor: pointer;
  list-style: none;
  border-radius: 25px;
  margin: 10px;
  background: #eee;
  flex: 1;
}
.purchase-procees-page-wrapper .canteen-items-list .canteen-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.purchase-procees-page-wrapper .canteen-items-list .canteen-item .canteen-item-inner-box {
  display: flex;
  height: 100%;
}
.purchase-procees-page-wrapper .canteen-items-list .canteen-item .canteen-item-inner-box .item-content-box {
  flex: 1;
  color: #333;
}
.purchase-procees-page-wrapper .canteen-items-list .canteen-item .item-img-box {
  display: flex;
  align-items: start;
  justify-content: center;
  margin-left: 15px;
}
.purchase-procees-page-wrapper .canteen-items-list .canteen-item .item-img-box img {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  object-fit: cover;
  max-width: 100%;
  border: 1px solid #ddd;
}
@media screen and (max-width: 450px) {
  .purchase-procees-page-wrapper .canteen-items-list .canteen-item {
    min-width: 200px;
  }
  .purchase-procees-page-wrapper .canteen-items-list .canteen-item .item-img-box img {
    width: 50px;
    height: 50px;
  }
}
.purchase-procees-page-wrapper .canteen-items-list.category-details-list .canteen-item .item-content-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
}
.purchase-procees-page-wrapper .canteen-items-list.category-details-list .canteen-item .item-content-box h3 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.purchase-procees-page-wrapper .canteen-items-list.category-details-list .canteen-item .item-content-box p {
  word-break: break-word;
}
.purchase-procees-page-wrapper .canteen-items-list.categories-list .canteen-item:nth-child(4n+1) {
  background: #fdf5f2;
}
.purchase-procees-page-wrapper .canteen-items-list.categories-list .canteen-item:nth-child(4n+2) {
  background: #edfaff;
}
.purchase-procees-page-wrapper .canteen-items-list.categories-list .canteen-item:nth-child(4n+3) {
  background: #f8f7fc;
}
.purchase-procees-page-wrapper .canteen-items-list.categories-list .canteen-item:nth-child(4n+4) {
  background: #fbf8f1;
}
.purchase-procees-page-wrapper .category-details-wrapper .category-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.purchase-procees-page-wrapper .additions-box .addition-list li {
  list-style: none;
}
.purchase-procees-page-wrapper .additions-box .addition-list li p {
  margin-bottom: 5px;
}
.purchase-procees-page-wrapper .additions-box .addition-list li .check-list-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.purchase-procees-page-wrapper .additions-box .addition-list li .check-list-wrapper .addition-price {
  margin-right: 5px;
}
.purchase-procees-page-wrapper .additions-box .addition-list li .check-list-wrapper .checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  position: relative;
  margin-left: 10px;
}
.purchase-procees-page-wrapper .additions-box .addition-list li .check-list-wrapper .checkbox input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute !important;
  left: 0;
  top: 0;
}
.purchase-procees-page-wrapper .additions-box .addition-list li .check-list-wrapper .checkbox label {
  border: 1px solid var(--main-color);
  padding: 10px;
  border-radius: 5px;
}
.purchase-procees-page-wrapper .additions-box .addition-list li .check-list-wrapper .checkbox input:checked + label {
  background: var(--main-color);
  color: #fff;
}
.purchase-procees-page-wrapper .additions-box .addition-list li .check-list-wrapper .checkbox input:checked + label .success {
  color: #fff;
}
.purchase-procees-page-wrapper .addItemModal h3:not(:last-child) {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.purchase-procees-page-wrapper .addItemModal p {
  font-size: 14px;
}
.purchase-procees-page-wrapper .addItemModal p span {
  margin: 3px;
}
.purchase-procees-page-wrapper .addItemModal .title-and-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.purchase-procees-page-wrapper .addItemModal .title-and-count .count-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70px;
}
.purchase-procees-page-wrapper .addItemModal .title-and-count .count-box .plus, .purchase-procees-page-wrapper .addItemModal .title-and-count .count-box .minus {
  cursor: pointer;
  color: var(--main-color);
  font-size: 1.4em;
}
.purchase-procees-page-wrapper .addItemModal .allergies-box {
  font-size: 14px;
}
.purchase-procees-page-wrapper .addItemModal .allergies-box span {
  margin: 3px;
}
.purchase-procees-page-wrapper .addItemModal .allergies-box ul {
  list-style: decimal;
  display: flex;
  flex-wrap: wrap;
}
.purchase-procees-page-wrapper .addItemModal .allergies-box ul li {
  margin-right: 20px;
  margin-top: 5px;
}
.purchase-procees-page-wrapper .addItemModal .allergies-box ul li::marker {
  color: var(--main-color);
}
.purchase-procees-page-wrapper.in-make-order-page .purchase-content {
  padding: 5px 15px;
}

.student-canteen-nav {
  margin-bottom: 10px;
}
.student-canteen-nav .userWalletInfo {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}
.student-canteen-nav .userWalletInfo span {
  padding: 0 10px;
  border-left: 1px solid #eee;
}
.student-canteen-nav .userWalletInfo span:last-child {
  border-left: 0;
}
.student-canteen-nav .nav-tabs a {
  cursor: pointer;
}
.student-canteen-nav .nav-tabs.nav-justified {
  display: flex;
  flex-wrap: wrap;
}

.canteen-orders-list table td {
  text-align: center;
}
.canteen-orders-list .orders-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  position: relative;
}
.canteen-orders-list .orders-table-wrapper table {
  min-height: 130px;
}
.canteen-orders-list .order-action {
  border: 0;
  margin: 3px 7px;
  display: inline-flex;
  align-items: center;
  padding: 5px 7px;
  border-radius: 5px;
  color: #fff;
}
.canteen-orders-list .order-action i {
  margin-left: 4px;
  font-size: 15px;
}
.canteen-orders-list .order-action.order-details {
  background: var(--main-color);
}
.canteen-orders-list .order-action.order-cancel {
  background: #e5301c;
}
.canteen-orders-list .order-action.order-in-progress {
  background: #F7CA0D;
}
.canteen-orders-list .order-action.order-delivered {
  background: #66BB6A;
}
.canteen-orders-list .pagination .page-item.disabled {
  pointer-events: none;
}
.canteen-orders-list .table-loader {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  background: transparent !important;
}
.canteen-orders-list .table-loader td {
  border: 0;
}
.canteen-orders-list .detailsOrder .order-item {
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  list-style: none;
  margin: 6px 0;
  flex: 1;
  background: #eee;
}
.canteen-orders-list .detailsOrder .order-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.canteen-orders-list .detailsOrder .order-item .item-inner-box {
  display: flex;
  height: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
}
.canteen-orders-list .detailsOrder .order-item .item-inner-box .item-content-box {
  flex: 1;
}
.canteen-orders-list .detailsOrder .order-item .item-inner-box .item-content-box p, .canteen-orders-list .detailsOrder .order-item .item-inner-box .item-content-box h3 {
  margin: 3px 0 0;
}
.canteen-orders-list .detailsOrder .order-item .item-img-box {
  display: flex;
  align-items: start;
  justify-content: center;
  margin-left: 15px;
}
.canteen-orders-list .detailsOrder .order-item .item-img-box img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  object-fit: cover;
  max-width: 100%;
  border: 1px solid #ddd;
}
.canteen-orders-list .detailsOrder .order-item .addition-list {
  display: flex;
  list-style: decimal;
}
.canteen-orders-list .detailsOrder .order-item .addition-list li {
  margin: 0 18px;
  font-size: 14px;
}
.canteen-orders-list .detailsOrder .order-item .addition-list li::marker {
  color: var(--main-color);
}
.canteen-orders-list .detailsOrder .order-item .additions-box h3 {
  margin: 20px 0 5px;
}
@media screen and (max-width: 450px) {
  .canteen-orders-list .detailsOrder .order-item {
    min-width: 200px;
  }
  .canteen-orders-list .detailsOrder .order-item .item-img-box img {
    width: 50px;
    height: 50px;
  }
}
.canteen-orders-list .detailsOrder .userInfo ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.canteen-orders-list .detailsOrder .userInfo ul li {
  padding: 10px 15px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}
.canteen-orders-list .detailsOrder .userInfo ul li p {
  margin-right: 10px;
  margin-bottom: 0;
}
.canteen-orders-list .detailsOrder .userInfo ul li:not(:last-child) {
  border-left: 1px solid #eee;
}

.officer-filter-wrapper {
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
}
.officer-filter-wrapper .filterLoader {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(250, 250, 250, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.officer-filter-wrapper .type-of-filter-box {
  display: flex;
  align-items: center;
}
.officer-filter-wrapper .type-of-filter-box .radio {
  margin: 10px !important;
  display: flex;
  align-items: center;
}
.officer-filter-wrapper .type-of-filter-box .radio input {
  margin-left: 5px;
  margin-top: 0;
}
.officer-filter-wrapper .filter_by_order_box, .officer-filter-wrapper .filter_by_items_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.officer-filter-wrapper .filter_by_order_box .form-group, .officer-filter-wrapper .filter_by_items_box .form-group {
  padding: 0 15px 10px;
  min-width: 272px;
}
@media screen and (max-width: 745px) {
  .officer-filter-wrapper .filter_by_order_box .form-group, .officer-filter-wrapper .filter_by_items_box .form-group {
    flex: 1;
  }
}
.officer-filter-wrapper .filter_by_order_box .form-actions .btn, .officer-filter-wrapper .filter_by_items_box .form-actions .btn {
  margin-left: 10px;
}

.rmdp-wrapper .rmdp-panel-body li, .rmdp-wrapper .rmdp-panel-body li.bg-blue,
.rmdp-wrapper .rmdp-day.rmdp-selected span:not(.highlight) {
  background-color: var(--main-color);
}
.rmdp-wrapper .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover,
.rmdp-wrapper .rmdp-arrow-container:hover {
  background-color: rgba(var(--main-color-rgb), 0.7);
}
.rmdp-wrapper .rmdp-day.rmdp-today span {
  background-color: #a7a8a8;
}
.rmdp-wrapper .rmdp-arrow {
  border-color: var(--main-color);
}
.rmdp-wrapper .rmdp-panel-body li .b-deselect {
  color: #aeaeae;
}
.rmdp-wrapper .rmdp-week-day {
  color: var(--main-color);
}

.category_details {
  width: 80%;
  margin: 0 auto;
}

@media screen and (max-width: 880px) {
  .canteenCategories, .category_details {
    width: 100%;
  }
}
.canteenCategories .category, .category_details .item {
  text-align: center;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  padding: 43px 0 36px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  margin-top: 20px;
  height: 350px;
}

.category_details .item {
  height: 385px;
  padding: 33px 0 45px;
  position: relative;
}

.canteenCategories .category:hover, .category_details .item:hover {
  background: #fafafa none repeat scroll 0 0;
  border-color: #fff;
  box-shadow: 4px 8px 14px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px #fff inset;
}

.category_details .item .btn {
  display: block;
  margin: 10px auto 5px;
  border-radius: 25px;
  width: 100px;
}

.category_details .item .btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.canteenCategories .category img {
  width: 150px;
  height: 100%;
  object-fit: contain;
}

.category_details .item img {
  border-radius: 5px;
  width: 150px;
  height: 150px;
  object-fit: cover;
  box-shadow: none;
  border: 1px solid #f0f0f0;
}

.canteenCategories .category h3, .canteenCategories .category span,
.category_details .item h3, .category_details .item span {
  color: #666;
  height: 33px;
  overflow-y: hidden;
}

.canteenCategories .category h3, .category_details .item h3 {
  font-size: 18px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25;
  height: 43px;
}

.canteenModal .modal-dialog {
  top: 10%;
}

.category_details .imageBorder {
  height: 2px;
  width: 40px;
  margin: 33px auto 20px;
  background: linear-gradient(90deg, #5B86E5 0%, var(--main-color) 100%);
}

@media screen and (min-width: 750px) {
  .my_wallet_wrapper .stuList .dropdown-menu {
    display: block;
    box-shadow: none !important;
    background: transparent !important;
    position: relative;
    margin-top: -2px;
  }

  .my_wallet_wrapper .stuList .dropdown-menu:before {
    display: none;
  }

  .my_wallet_wrapper .stuList .dropdown-toggle {
    display: none;
  }

  .my_wallet_wrapper .stuList .dropdown-menu li {
    display: inline-block;
  }

  .my_wallet_wrapper .stuList .dropdown-menu a {
    color: #ddd;
  }

  .my_wallet_wrapper .stuList .dropdown-menu a:hover, .my_wallet_wrapper .stuList .dropdown-menu li.active a {
    color: #fff;
    background: none;
  }

  .my_wallet_wrapper .stuList .dropdown-menu li.active a {
    font-weight: bold;
    font-size: 14px;
  }
}
.my_wallet_wrapper.canteenWallet .nav-tabs {
  margin-bottom: 20px;
}

.canteenWallet .nav-tabs > li {
  margin-bottom: 0;
}

/*box grids*/
/* start Common file*/
.page-content .page-body .tall_box .inner .image {
  margin: 20px 0 15px 5px !important;
  width: 110px;
  height: 140px;
}

.page-content .page-body .tall_box .inner .web_font_container {
  z-index: 9999;
  font-size: 51px;
  color: #fbfbfb;
  display: block;
  vertical-align: middle;
  line-height: 100px;
  font-family: picto-foundry-general !important;
  background: -o-radial-gradient(center, ellipse cover, #34b8ed 0%, #0892c9 100%);
}

.page-content .page-body .tall_box .inner .web_font_container .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  line-height: 50px;
  /*margin-left: -25px;*/
  margin-top: -25px;
  display: block;
  font-size: 51px;
  vertical-align: middle;
}
.page-content .page-body .tall_box .inner .web_font_container .icon:after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  content: "";
  background: url(/img/dashboard-icon-effect.png) no-repeat;
  background-size: contain;
  z-index: 0;
  opacity: 0.8;
}
.page-content .page-body .tall_box .inner .web_font_container .icon:before {
  z-index: 1;
}

.page-content .page-body .tall_box .inner .details {
  text-align: center;
}

.page-content .page-body .tall_box .inner .progress_with_course_icon {
  margin-top: 5px;
}

.page-content .page-body .tall_box .inner .details h2 {
  color: var(--main-color);
  font-size: 22px;
  margin: 8px;
  padding-top: 10px;
  line-height: 120%;
}

.page-content .page-body .tall_box .inner .details .msg {
  color: #ffffff;
  font: 12px "Roboto", sans-serif;
  direction: rtl;
  white-space: normal;
  text-align: center;
  width: 100%;
  display: block;
}

.page-content .page-body .tall_box .inner .details .msg span {
  font: 17px Arial, "Roboto", sans-serif;
  background-color: #d1f5fc !important;
  color: #4e4e4e;
  font-weight: 600;
}

.page-content .page-body .tall_box .inner .details .progress_chart {
  height: 110px;
  margin: 0 auto;
  margin-top: 20px;
  width: 110px;
  text-align: center;
}

.page-content .page-body .tall_box .inner .details .success {
  color: #ffffff !important;
  top: -69px;
  position: relative;
}

.page-content .page-body .tall_box .inner .details .danger {
  top: -69px;
  position: relative;
}

/* Sliders Content */
.page-content .page-body .tall_box .inner .slided {
  margin: 0 auto;
  padding: 10px 0px 0 0;
  text-align: center;
  z-index: 5px;
  display: block;
  background: #fefefe;
  border-radius: 8px 8px 7px 7px;
  /* border: 1px solid #4993de; */
}

.page-content .page-body .tall_box .inner .slided .icon {
  float: left;
  width: 51px;
  height: 40px;
  font-size: 30px;
}

.page-content .page-body .tall_box .inner .slided .title {
  text-align: center;
  color: #4993de;
  font-size: 140%;
  font-family: "Roboto";
  padding: 10px 0 0 0;
  line-height: 95%;
  margin-top: 15px;
  z-index: 999;
}

.page-content .page-body .tall_box .inner .slided .showall {
  /*float: $left;*/
  color: #fff !important;
  /*font: 14px "Roboto";*/
  font-weight: 400;
  padding: 2px 14px;
  cursor: pointer;
  position: absolute;
  text-align: center;
  /*top: 10px;*/
  /*right: 10px;*/
  border: 2px solid;
  border-radius: 25px;
}

.page-content .page-body .tall_box .inner .slided .cell_title_bar {
  /*background-color: #d5d5d5 !important;*/
  padding-bottom: 0px;
  height: 58px;
  border-radius: 0 0 5px 5px;
  transition: ease-in-out 0.1s all;
}

.page-content .page-body .tall_box .inner:hover .slided .cell_title_bar {
  background: transparent !important;
}

.tall_box .inner .slided .paged_block {
  padding: 10px;
}

.tall_box .inner .slided .paged_item a {
  float: right;
  background: url(../../img/arrow.png) no-repeat left;
  color: #7f7f7f;
  text-decoration: none;
  background: none !important;
  overflow: hidden;
  height: 22px;
}

.tall_box .inner .slided .paged_item a.add_new_button {
  background: url(../../img/add_new.png) no-repeat top left !important;
  margin: 0 2px;
}

.tall_box .inner .slided .paged_item a:hover {
  text-decoration: underline;
}

.tall_box .inner .slided .paged_item span {
  float: right;
  color: var(--main-color);
  font-size: 12px;
  padding: 0 0 0 15px;
}

.paged_block {
  min-height: 130px;
  position: relative;
  z-index: 0;
}

ul.paging .selected {
  background-color: #b7b7b7;
}

.paged_item .info {
  position: relative;
  font: 13px "Roboto";
  cursor: pointer;
  overflow: hidden;
  float: left;
}

.paged_item .image_link {
  float: left;
  padding: 0 15px 0 0;
  position: relative;
  cursor: pointer;
  margin: 2px;
}

.paged_item .image_link li {
  float: left;
  vertical-align: middle;
}

div .paged_items {
  height: 142px;
  position: relative;
  top: 20px;
  text-align: initial;
  overflow: hidden;
}

.web_font_container {
  -webkit-transition: background 1s, color 1.5s;
  -moz-transition: background 2s, color 1.5s;
  transition: background 1s, color 1.5s;
}

.tall_box .inner .slided .paged_item a:hover {
  color: #337ab7;
}

/* end Common file */
/* Start V8 theme file */
/*Student Homepage*/
.boxgrid {
  margin: 7px;
  /*width: 95%;*/
  height: 350px;
  position: relative;
  border-radius: 7px;
  /*box-shadow: 0 3px 6px  rgba(0, 0, 0, .15);*/
  /*overflow: hidden;*/
}

.boxgrid .title_cover {
  /*color: $black_to_eee;*/
  color: var(--dark-blue-color);
  min-height: 70px;
  top: 22px;
}
.boxgrid .title_cover .titleـtext {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 65px;
}

.boxgrid .inner {
  height: 100%;
}

.boxgrid .cover .icon {
  /*border: 3px solid #FFF;*/
  padding: 10px;
  top: 20% !important;
  /*left: calc(50% - 30px) !important;*/
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  font-size: 30px !important;
  width: 90px;
  height: 90px;
  line-height: 88px !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  border: 0;
  color: #fff;
}

.boxgrid .cover .date-calendar {
  border: 1px solid #CCC;
  padding: 10px;
  top: 12% !important;
  border-top: solid var(--main-color) 5px;
  width: 80px;
  height: 87px;
  font-size: 0.7em;
  line-height: 30px;
}

.boxgrid .msg {
  color: #aeaeae !important;
  padding-top: 115px;
  font-size: 1em !important;
}

.boxgrid .msg span {
  position: absolute;
  top: 5px;
  left: 9px;
  height: 28px;
  width: 60px !important;
  text-align: center;
  display: flex;
  padding: 0 9px;
  padding-right: 25px;
  text-indent: 0;
  border-radius: 7px !important;
  justify-content: center;
  align-items: center;
}
.boxgrid .msg span:before {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  content: "\f0f6";
  font-family: FontAwesome;
  color: var(--main-color);
  font-size: 14px;
  font-weight: 100;
}

.boxgrid .progress-bar {
  position: absolute;
  bottom: 11px;
  left: 10px;
  width: calc(100% - 20px);
  height: 12px;
  border-radius: 15px;
  background: #eee;
}

.boxgrid .progress-bar .progress-bar {
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #FFF;
}

.boxgrid .progress-bar .progress-bar span {
  color: var(--dark-blue-color);
  /*color: #0084d7;*/
  top: -25px;
  font-size: 1.5em;
  font-weight: bold;
  left: 1%;
  position: absolute;
}

.boxgrid .progress-bar .progress-bar span i {
  font-size: 0.5em;
  font-style: normal;
}

/* first block every 2 rows (a row has 3 elems) */
.main-blocks:nth-child(6n+1) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #FC3176 0%, #916E9C 100%);
}

.main-blocks:nth-child(6n+1) .boxgrid .cover .icon {
  /*  color: #FC3176;
    border-color: #FC3176;*/
  background: #FC3176;
}

.main-blocks:nth-child(6n+1) .boxgrid .slided {
  background: #FC3176 !important;
}

/* second block every 2 rows (a row has 3 elems) */
.main-blocks:nth-child(6n+2) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #a182a9 0%, var(--main-color) 50%, #988aec 100%);
}

.main-blocks:nth-child(6n+2) .boxgrid .cover .icon {
  /* color: $primary;
   border-color: $primary;*/
  background: var(--main-color);
}

.main-blocks:nth-child(6n+2) .boxgrid .slided {
  background: var(--main-color) !important;
}

/* third block every 2 rows (a row has 3 elems) */
.main-blocks:nth-child(6n+3) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #9D8DEF 0%, #7D2989 100%);
}

.main-blocks:nth-child(6n+3) .boxgrid .cover .icon {
  /* color: #7D2989;
   border-color: #7D2989;*/
  background: #7D2989;
}

.main-blocks:nth-child(6n+3) .boxgrid .slided {
  background: #7D2989 !important;
}

/* fourth block every 2 rows (a row has 3 elems) */
.main-blocks:nth-child(6n+4) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #79060F 0%, #B18B79 100%);
}

.main-blocks:nth-child(6n+4) .boxgrid .cover .icon {
  /*color: #79060F;
  border-color: #79060F;*/
  background: #79060F;
}

.main-blocks:nth-child(6n+4) .boxgrid .slided {
  background: #79060F !important;
}

/* fifth block every 2 rows (a row has 3 elems) */
.main-blocks:nth-child(6n+5) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #8E4A2C 0%, #BF8B49 50%, #58A9BE 100%);
}

.main-blocks:nth-child(6n+5) .boxgrid .cover .icon {
  /*color: #BA8641;
  border-color: #BA8641;*/
  background: #BA8641;
}

.main-blocks:nth-child(6n+5) .boxgrid .slided {
  background: #BA8641 !important;
}

/* last block every 2 rows (a row has 3 elems) */
.main-blocks:nth-child(6n+6) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #51A9C0 0%, #1C1D7A 100%);
}

.main-blocks:nth-child(6n+6) .boxgrid .cover .icon {
  /*color: #1C1D7A;
  border-color: #1C1D7A;*/
  background: #1C1D7A;
}

.main-blocks:nth-child(6n+6) .boxgrid .slided {
  background: #1C1D7A !important;
}

.dashboard-blocks-wrapper {
  /* first block every 2 rows (a row has 3 elems) */
  /* second block every 2 rows (a row has 3 elems) */
  /* third block every 2 rows (a row has 3 elems) */
  /* fourth block every 2 rows (a row has 3 elems) */
  /* fifth block every 2 rows (a row has 3 elems) */
  /* last block every 2 rows (a row has 3 elems) */
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+1) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #59cc3c 0%, #03ceef 100%);
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+1) .boxgrid .cover .icon {
  background: #59cc3c;
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+1) .boxgrid .slided {
  background: #59cc3c !important;
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+2) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #0084D7 0%, var(--main-color) 50%, #00CDF4 100%);
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+2) .boxgrid .cover .icon {
  background: #0084D7;
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+2) .boxgrid .slided {
  background: #0084D7 !important;
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+3) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #8959E5 0%, #00CDF4 100%);
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+3) .boxgrid .cover .icon {
  background: #8959E5;
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+3) .boxgrid .slided {
  background: #8959E5 !important;
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+4) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #f7c80d 0%, #e77602 100%);
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+4) .boxgrid .cover .icon {
  background: #e77602;
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+4) .boxgrid .slided {
  background: #e77602 !important;
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+5) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #39BC6B 0%, #00CDF4 100%);
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+5) .boxgrid .cover .icon {
  background: #39BC6B;
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+5) .boxgrid .slided {
  background: #39BC6B !important;
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+6) .boxgrid .cover .progress-bar .progress-bar {
  background-image: linear-gradient(90deg, #00E2D0 0%, #00CDF4 100%);
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+6) .boxgrid .cover .icon {
  background: #00CDF4;
}
.dashboard-blocks-wrapper .main-blocks:nth-child(6n+6) .boxgrid .slided {
  background: #00CDF4 !important;
}

/* dashboard-blocks-wrapper */
.boxgrid .slided {
  height: 100%;
  position: relative;
}

.boxgrid .slided .cell_title_bar {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  background: transparent !important;
  padding: 5px;
}

.boxgrid .slided .cell_title_bar .title {
  color: #FFF !important;
  text-align: right !important;
  position: absolute;
  top: -12px;
  right: 16px;
  font-size: 150% !important;
  z-index: 0 !important;
  display: none;
}

.boxgrid .slided .cell_title_bar .showall {
  top: 50% !important;
  right: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  position: absolute !important;
}

.boxgrid .slided .cell_title_bar .showall a {
  color: #FFF !important;
  font-size: 1.2em !important;
  font-weight: normal;
}

.boxgrid .slided .paged_items {
  margin-top: 0;
  font-size: 1.2em;
  height: 245px;
  color: #FFF;
  text-align: center;
}

.boxgrid .slided .paged_item {
  height: 50px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.boxgrid .slided .paged_item:nth-child(4n) {
  border: 0;
}

.boxgrid .slided .paged_item .image_link {
  top: 15px;
}

.boxgrid .slided .paged_item .info {
  color: #FFF !important;
  line-height: 50px;
  height: 50px;
}

.boxgrid .slided .paged_item .link a {
  color: #FFF;
  font-size: 1em;
  height: 50px;
  line-height: 50px;
  font-weight: 300 !important;
}

.boxgrid .slided .paged_item .link a:hover, .boxgrid .slided .paged_item .link a:active {
  color: rgba(255, 255, 255, 0.5);
}

.boxgrid .slided .paged_item .link a:before {
  display: none;
}

.boxgrid .slided .no_new_notifications_notice {
  color: #FFF;
}

.boxgrid .slided .table {
  background: transparent;
}

.boxgrid .slided ul.paging li a {
  border-radius: 50% !important;
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 0 !important;
  background: transparent !important;
  border: 0;
  opacity: 0.7;
}

.boxgrid .slided ul.paging {
  padding: 5px 0 0;
}
.boxgrid .slided ul.paging li a.selected {
  opacity: 1;
  font-weight: bold;
}

.boxgrid .slided .prev-page, .boxgrid .slided .next-page {
  color: #FFF;
  position: absolute;
  bottom: 4px;
  right: 0;
  font-size: 0.9em;
  z-index: 2;
  cursor: pointer;
  text-transform: uppercase;
}

.boxgrid .slided .prev-page.disabled, .boxgrid .slided .next-page.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.boxgrid .slided .next-page {
  right: auto;
  left: 0;
}

.boxgrid .slided .next-page:not(.more-link):after {
  content: "→";
}

.boxgrid .slided .prev-page:before {
  content: "←";
}

.boxgrid .teacher-info img {
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  top: 130px !important;
  z-index: 2 !important;
  left: 44% !important;
  border: 1px solid #FFF !important;
}

/* Courses Blocks*/
.page-content .page-body .tall_box .inner .image {
  position: absolute;
  width: 170px;
  height: 170px;
  left: 50%;
  transform: translateX(-50%);
}

.boxgrid .cover img {
  top: 80px;
  height: 150px;
  width: 150px;
}

.boxgrid .course-level {
  color: #777 !important;
}

.boxgrid .slided .cell_title_bar .title span {
  color: #FFF !important;
}

.tall_box .inner .slided .paged_item a {
  color: #FFF !important;
  right: 0;
  text-align: right;
  overflow: hidden;
  max-width: calc(100% - 100px);
}

.tall_box .inner .slided .paged_item ._create_button a {
  max-width: none;
}

/* End V8 theme file */
.dashboard-blocks-wrapper {
  width: 100%;
}
.dashboard-blocks-wrapper .main-blocks {
  overflow: hidden;
}

@media screen and (max-width: 1325px) {
  .dashboard-blocks-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .dashboard-blocks-wrapper .main-blocks {
    min-width: 300px;
    flex: 1;
  }
}
@media screen and (min-width: 1617px) {
  .dashboard-blocks-wrapper {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
  }
  .dashboard-blocks-wrapper .main-blocks {
    width: 100%;
  }
}
@media screen and (min-width: 1325px) and (max-width: 1617px) {
  .dashboard-blocks-wrapper {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
  }
  .dashboard-blocks-wrapper .main-blocks {
    width: 100%;
  }
}
.progress-bar-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fafafa;
  height: 56px;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dashboard-blocks-wrapper .boxgrid .cover {
  height: calc(100% - 54px);
  border-radius: 0 0 7px 7px;
}
.dashboard-blocks-wrapper .tall_box .inner .slided .cell_title_bar {
  background-color: #a5a5a5 !important;
}
.dashboard-blocks-wrapper .title_cover {
  top: 110px;
}
.dashboard-blocks-wrapper .expenses .inner .slided .showall {
  display: none;
}

:not(.dashboard-blocks-wrapper) .boxgrid {
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  background: transparent;
  /* .title_cover{
    top: 12px;
    }*/
  /*  &.tall_box .inner .slided .cell_title_bar{
      background: transparent !important;
    }*/
}

.teacher-courses-index {
  /* .boxgrid .slided .paged_items{
         height: 280px;
   }*/
}
.teacher-courses-index .tall_box .inner .details .msg {
  padding-top: 200px !important;
}
.teacher-courses-index .boxgrid .cell_title_bar {
  /*display: none;*/
  height: 35px;
}

.vcrs-stu-dashboard-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}
.vcrs-stu-dashboard-wrapper::-webkit-scrollbar {
  background-color: transparent;
  border-radius: 10px;
  height: 7px;
}
.vcrs-stu-dashboard-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}
.vcrs-stu-dashboard-wrapper .vcr-box-stu-dashboard {
  width: 280px;
  border-radius: 7px;
  height: 115px;
  display: inline-block;
  margin-left: 8px;
  color: #fff;
  padding: 7px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.vcrs-stu-dashboard-wrapper .vcr-box-stu-dashboard.vcr-warning {
  background: linear-gradient(180deg, #0069D3, #00CDF4);
}
.vcrs-stu-dashboard-wrapper .vcr-box-stu-dashboard.vcr-primary {
  background: linear-gradient(180deg, #f7ca0d, #ffbe7e);
}
.vcrs-stu-dashboard-wrapper .vcr-box-stu-dashboard.vcr-default {
  background: linear-gradient(180deg, #A5A5A5, #D5D5D5);
}
.vcrs-stu-dashboard-wrapper .vcr-box-stu-dashboard.vcr-success {
  background: linear-gradient(180deg, #5DCB34, #00E2D0);
}
.vcrs-stu-dashboard-wrapper .vcr-name {
  display: grid;
  grid-template-columns: 16% 84%;
}
.vcrs-stu-dashboard-wrapper .vcr-name h4 {
  font-weight: 400 !important;
}
.vcrs-stu-dashboard-wrapper .vcr-title {
  overflow: hidden;
  text-overflow: ellipsis;
}
.vcrs-stu-dashboard-wrapper .vcr_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}
.vcrs-stu-dashboard-wrapper .vcr_icon i {
  position: relative;
}
.vcrs-stu-dashboard-wrapper .vcr_icon.live i:after {
  content: "";
  position: absolute;
  right: -5px;
  top: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ED221A;
}
.vcrs-stu-dashboard-wrapper .vcr-info {
  display: grid;
  grid-template-columns: 16% 84%;
  height: calc(100% - 46px);
  padding-top: 7px;
  /* .teacher-img-box{
     img{
        max-width: 55%;
        border-radius: 50%;
          margin: 0 auto;
         display: block;
     }
   }*/
}
.vcrs-stu-dashboard-wrapper .vcr-info .data-box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.vcrs-stu-dashboard-wrapper .date-vcr {
  display: flex;
  font-weight: 400;
}
.vcrs-stu-dashboard-wrapper .date-vcr p:first-child {
  margin-left: 5px;
}
.vcrs-stu-dashboard-wrapper .join-btn {
  font-weight: 500;
  color: #fff;
  text-align: center;
}
.vcrs-stu-dashboard-wrapper .date-join-section {
  display: grid;
  grid-template-columns: auto 45px;
}

.announcements_of_stu_dashboard_bar_wrapper {
  padding: 18px 0;
  display: flex;
  flex-wrap: wrap;
}
.announcements_of_stu_dashboard_bar_wrapper .no-announcments-found {
  color: var(--dark-blue-color);
  height: 100%;
  margin: 0;
  padding: 12px 15px;
  background: #eee;
  border-radius: 8px;
}
.announcements_of_stu_dashboard_bar_wrapper .no-announcments-found .no-announcments-found-msg {
  text-align: center;
  position: relative;
  margin-top: 30px;
}
.announcements_of_stu_dashboard_bar_wrapper .no-announcments-found .no-announcments-found-msg h3 {
  padding-right: 50px !important;
}
.announcements_of_stu_dashboard_bar_wrapper .no-announcments-found .no-announcments-found-msg .announcements-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.announcements_of_stu_dashboard_bar_wrapper .no-announcments-found .no-announcments-found-msg .announcements-icon .announcements-icon-a {
  fill: var(--main-color);
  opacity: 0.5;
}
.announcements_of_stu_dashboard_bar_wrapper #student_dashboard_announcements_load {
  width: 100%;
  text-align: center;
}
.announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box {
  display: inline-block;
  padding: 12px 15px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 7px;
  margin: 0 0 10px;
  margin-left: 10px;
  background: #fff;
  height: auto;
  width: 250px;
}
@media screen and (max-width: 1255px) {
  .announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box {
    flex: 1;
    margin: 0 10px 10px;
    margin-left: 0 !important;
  }
}
.announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box:last-child {
  margin-left: 0;
}
.announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box.announcments_box_wrapper {
  flex: 1;
  padding: 0 !important;
}
@media screen and (max-width: 1255px) {
  .announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box.announcments_box_wrapper {
    min-width: 98%;
    height: auto;
  }
}
.announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box.announcments_box_wrapper #announcements {
  padding: 0 !important;
}
.announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box.announcments_box_wrapper #announcements .widget-body {
  height: 100px !important;
}
.announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box.announcments_box_wrapper #announcements .widget {
  box-shadow: none;
  background: transparent;
}
.announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box.announcments_box_wrapper #announcements .show_more_box {
  left: 10px;
  bottom: 5px;
}
.announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box.announcments_box_wrapper #announcements #annoucementPagination {
  display: flex;
  overflow-x: auto;
}
.announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box.announcments_box_wrapper #announcements #annoucementPagination::-webkit-scrollbar {
  background-color: transparent;
  border-radius: 10px;
  height: 7px;
}
.announcements_of_stu_dashboard_bar_wrapper .announcement_dash_box.announcments_box_wrapper #announcements #annoucementPagination::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}
.announcements_of_stu_dashboard_bar_wrapper .score .title_, .announcements_of_stu_dashboard_bar_wrapper .badges .title_ {
  color: var(--dark-blue-color);
  font-weight: 500 !important;
  margin-bottom: 20px;
}
.announcements_of_stu_dashboard_bar_wrapper .score .content_, .announcements_of_stu_dashboard_bar_wrapper .badges .content_ {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 15%;
}
.announcements_of_stu_dashboard_bar_wrapper .score .number_, .announcements_of_stu_dashboard_bar_wrapper .badges .number_ {
  font-size: 30px;
  color: var(--main-color);
  cursor: pointer;
}
.announcements_of_stu_dashboard_bar_wrapper .score .number_:hover, .announcements_of_stu_dashboard_bar_wrapper .badges .number_:hover {
  text-decoration: underline;
}
.announcements_of_stu_dashboard_bar_wrapper .score .number_.disaibled, .announcements_of_stu_dashboard_bar_wrapper .badges .number_.disaibled {
  cursor: auto;
  text-decoration: unset;
}
.announcements_of_stu_dashboard_bar_wrapper .score.Diamond .icon__score {
  stroke: #f75151;
}
.announcements_of_stu_dashboard_bar_wrapper .score.Golden .icon__score {
  stroke: #f7ca0d;
}
.announcements_of_stu_dashboard_bar_wrapper .score.Green .icon__score {
  stroke: #5DCB34;
}
.announcements_of_stu_dashboard_bar_wrapper .score #scoreBar #label {
  display: none;
}
.announcements_of_stu_dashboard_bar_wrapper .score #scoreBar #score img {
  display: none;
}
.announcements_of_stu_dashboard_bar_wrapper .score #scoreBar .score-link {
  font-size: 38px !important;
  color: var(--main-color) !important;
}

#badges_modal .modal-content {
  border-radius: 8px;
  overflow: hidden;
}
#badges_modal .modal-footer {
  background: transparent;
}
#badges_modal li {
  list-style: none;
}

/*.teacher-courses-index .paged_block .table{
  margin-top: 40px;
}
*/
.list-courses-main-blocks-wrapper .paged_block .table {
  margin-top: 40px;
}
.list-courses-main-blocks-wrapper .boxgrid .slided .cell_title_bar {
  display: none;
}

.teacher-courses-index .course-block .paged_block .table {
  margin-top: 40px;
}
.teacher-courses-index .course-block .boxgrid .slided .cell_title_bar {
  display: none;
}
.teacher-courses-index .main-blocks:not(.course-block) {
  display: block;
}

.main-categories-stu-dashboard-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  padding: 20px 0;
  /* Responsive adjustments */
}
.main-categories-stu-dashboard-container.teacher-courses-index {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1150px) {
  .main-categories-stu-dashboard-container.teacher-courses-index {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 750px) {
  .main-categories-stu-dashboard-container.teacher-courses-index {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .main-categories-stu-dashboard-container.teacher-courses-index {
    grid-template-columns: repeat(1, 1fr);
  }
}
.main-categories-stu-dashboard-container.collapsed .main-category-stu-box {
  display: none;
}
.main-categories-stu-dashboard-container.collapsed .main-category-stu-box:nth-child(-n+1) {
  display: block;
}
@media (min-width: 1665px) {
  .main-categories-stu-dashboard-container.collapsed .main-category-stu-box:nth-child(-n+6) {
    display: block;
  }
}
@media (min-width: 1415px) {
  .main-categories-stu-dashboard-container.collapsed .main-category-stu-box:nth-child(-n+5) {
    display: block;
  }
}
@media (min-width: 1165px) {
  .main-categories-stu-dashboard-container.collapsed .main-category-stu-box:nth-child(-n+4) {
    display: block;
  }
}
@media (min-width: 915px) {
  .main-categories-stu-dashboard-container.collapsed .main-category-stu-box:nth-child(-n+3) {
    display: block;
  }
}
@media (min-width: 575px) {
  .main-categories-stu-dashboard-container.collapsed .main-category-stu-box:nth-child(-n+2) {
    display: block;
  }
}
.main-categories-stu-dashboard-container .main-category-stu-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  min-width: 220px;
  min-height: 200px;
  /* first block every 2 rows (a row has 3 elems) */
  /* second block every 2 rows (a row has 3 elems) */
  /* third block every 2 rows (a row has 3 elems) */
  /* fourth block every 2 rows (a row has 3 elems) */
  /* fifth block every 2 rows (a row has 3 elems) */
  /* last block every 2 rows (a row has 3 elems) */
}
.main-categories-stu-dashboard-container .main-category-stu-box.course-box-in-teacher-dashbaord.not-allowed-to-edit-content .paging-wrapper {
  display: none !important;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner {
  display: none;
  min-width: 100%;
  padding: 15px;
  z-index: 11;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .no_notifications_msg {
  text-align: center;
  margin-top: 30px;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .table {
  background: transparent;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .cell_title_bar {
  text-align: center;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .showall {
  border: 1px solid var(--main-color);
  background: transparent !important;
  border-radius: 25px;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .showall a {
  color: var(--main-color);
  font-weight: bold;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 0;
  padding: 5px 0;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_item:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_item a, .main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_item .info {
  color: #444 !important;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_item .info {
  padding: 0;
  padding-right: 10px;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paging-wrapper {
  margin: 15px 0 10px;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paging-wrapper a {
  color: #444;
  font-weight: bold;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paging-wrapper .page-number-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 1px 4px;
  font-size: 14px;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paging-wrapper .page-number-btn.selected {
  color: var(--main-color);
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .no_new_notifications_notice {
  color: #444;
  font-weight: bold;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items {
  top: 0;
  height: 170px;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items.items_of_teacher_courses {
  height: 180px;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.browse-content, .main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.student-list, .main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.grade-managment, .main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.more-content {
  display: inline-flex;
  flex-direction: column;
  width: 48%;
  height: 85px;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  margin: 3px 0;
  border: 1px solid #eee;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.browse-content:before, .main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.student-list:before, .main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.grade-managment:before, .main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.more-content:before {
  font-family: "icomoon" !important;
  margin-bottom: 5px;
  font-size: 1.4em;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.browse-content:before {
  content: "\ea60" !important;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.student-list:before {
  content: "\ea0f" !important;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.grade-managment:before {
  content: "\e936" !important;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .paged_item.more-content:before {
  content: "\e91b" !important;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .image_link {
  padding: 0;
  float: none;
  display: flex;
  align-items: center;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .image_link ._create_button {
  text-decoration: none;
  display: flex;
  align-items: center;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .paged_items .image_link ._create_button:before {
  color: var(--main-color);
  padding-left: 5px;
  content: "\e9c7";
  font-family: "icomoon" !important;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .next-page, .main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .prev-page {
  cursor: pointer;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .next-page.disabled, .main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_inner .prev-page.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+1) .progress-bar {
  background-image: linear-gradient(90deg, #59cc3c 0%, #03ceef 100%);
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+1) .main_category_stu_icon {
  color: #59cc3c;
  background: #59cc3c21;
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+2) .progress-bar {
  background-image: linear-gradient(90deg, #0084D7 0%, var(--main-color) 50%, #00CDF4 100%);
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+2) .main_category_stu_icon {
  color: #0084D7;
  background: #0084D721;
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+3) .progress-bar {
  background-image: linear-gradient(90deg, #8959E5 0%, #00CDF4 100%);
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+3) .main_category_stu_icon {
  color: #8959E5;
  background: #8959E521;
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+4) .progress-bar {
  background-image: linear-gradient(90deg, #f7c80d 0%, #e77602 100%);
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+4) .main_category_stu_icon {
  color: #e77602;
  background: #e7760221;
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+5) .progress-bar {
  background-image: linear-gradient(90deg, #39BC6B 0%, #00CDF4 100%);
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+5) .main_category_stu_icon {
  color: #39BC6B;
  background: #39BC6B21;
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+6) .progress-bar {
  background-image: linear-gradient(90deg, #00E2D0 0%, #00CDF4 100%);
}
.main-categories-stu-dashboard-container .main-category-stu-box:nth-child(6n+6) .main_category_stu_icon {
  color: #00CDF4;
  background: #00CDF421;
}
.main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
  min-height: 300px;
  min-width: 102%;
  border-radius: 15px;
  z-index: 999;
  border: 1px solid #777;
}
.main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container:before {
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  content: "";
  width: 20px;
  height: 20px;
  border-left: 1px solid #777;
  border-bottom: 1px solid #777;
  z-index: 1;
  background: #fff;
}
@media (max-width: 575px) {
  .main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container {
    left: 0;
  }
  .main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container:before {
    display: none;
  }
}
.main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container .main_category_stu_inner {
  display: block;
}
.main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container .progress-bar-container-of-container {
  display: none;
}
.main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container .main_category_stu_cover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding: 15px;
  cursor: default;
}
.main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container .main_category_stu_cover .main_category_stu_icon {
  font-size: 20px;
  margin: 0;
  margin-left: 10px;
  width: unset;
  height: unset;
  background: transparent;
}
.main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container .main_category_stu_cover .main_category_stu_icon img {
  width: 30px;
}
.main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container .main_category_stu_cover .main_category_stu_title {
  margin: 0;
}
.main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container .main_category_stu_cover .main_category_stu_count, .main-categories-stu-dashboard-container .main-category-stu-box:hover .main-category-stu-box-container .main_category_stu_cover .msg {
  display: none;
}
.main-categories-stu-dashboard-container .main-category-stu-box .msg {
  opacity: 0.5;
  font-size: 12px;
}
.main-categories-stu-dashboard-container .main-category-stu-box .no_new_notifications_notice {
  color: #fff;
}
.main-categories-stu-dashboard-container .main-category-stu-box .main_category_stu_count {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  left: 15px;
  color: #fff;
  background: #EF625C;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.main-categories-stu-dashboard-container .main-category-stu-box .progress-bar-container-of-container {
  height: 50px;
  width: calc(100% - 60px);
  right: 50px;
  left: unset;
  position: relative;
  margin-bottom: -20px;
}
.main-categories-stu-dashboard-container .main-category-stu-box .progress-bar-container {
  width: 100%;
}
.main-categories-stu-dashboard-container .main-category-stu-box .progress-bar, .main-categories-stu-dashboard-container .main-category-stu-box .progress-bar-container {
  position: absolute;
  height: 8px;
  border-radius: 15px;
  background: #fafafa;
  right: 0;
  left: unset;
  bottom: 15px;
  box-shadow: none;
  float: unset;
}
.main-categories-stu-dashboard-container .main-category-stu-box .progress-bar {
  top: 0;
  background: linear-gradient(90deg, var(--main-color) 0%, rgba(var(--main-color-rgb), 0.4) 100%);
}
.main-categories-stu-dashboard-container .main-category-stu-box .progress-bar span {
  color: #444;
  top: 50%;
  font-size: 14px;
  transform: translateY(-50%);
  right: -40px !important;
  left: unset !important;
  position: absolute;
  font-weight: bold;
  opacity: 0.8;
}
.main-categories-stu-dashboard-container .main-category-stu-box .progress-bar span i {
  font-style: normal;
}
.main-categories-stu-dashboard-container .main_category_stu_icon {
  font-size: 30px;
  margin: 30px auto 20px;
  color: var(--main-color);
  display: inline-flex;
  width: 70px;
  height: 70px;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  background: rgba(0, 0, 0, 0.03);
  font-weight: bold;
}
.main-categories-stu-dashboard-container .main_category_stu_icon.img {
  margin-top: 20px;
  background: transparent !important;
}
.main-categories-stu-dashboard-container .main_category_stu_icon img {
  width: 60px;
}
.main-categories-stu-dashboard-container .main_category_stu_title {
  font-weight: 500;
  font-size: 14px;
  margin: 10px 0;
}
.main-categories-stu-dashboard-container .main_category_stu_cover {
  text-align: center;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .main-categories-stu-dashboard-container .main-categories-stu-dashboard-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}
@media screen and (max-width: 480px) {
  .main-categories-stu-dashboard-container .main-categories-stu-dashboard-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.main-section-title-of-stu-dashboard {
  margin-top: 20px;
}
.main-section-title-of-stu-dashboard .main-section-icon {
  padding: 15px 7px;
  min-width: 56px;
  text-align: center;
  font-size: 2.5em;
  color: #fff;
  background: var(--main-color);
  border-radius: 10px;
}
.main-section-title-of-stu-dashboard .main-section-icon:before {
  color: unset;
}
.main-section-title-of-stu-dashboard .main-section-icon > span:before {
  color: #fff;
}
.main-section-title-of-stu-dashboard .main-section-icon:not(.not-bold) {
  font-weight: bold;
}
.main-section-title-of-stu-dashboard .main-section-icon.main-categories-icon {
  padding: 7px 10px;
}
.main-section-title-of-stu-dashboard .main-section-title {
  margin: 0;
  margin-right: 15px;
  text-transform: uppercase;
  font-weight: 500 !important;
}
.main-section-title-of-stu-dashboard .main-section-title p {
  font-weight: 300;
  font-size: 14px;
}
@media screen and (max-width: 420px) {
  .main-section-title-of-stu-dashboard .main-section-title {
    font-size: 19px !important;
  }
}
.main-section-title-of-stu-dashboard .view-all-section {
  opacity: 0.8;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  border-radius: 25px;
  padding: 10px 15px;
  font-weight: 300;
  color: #fff;
}
.main-section-title-of-stu-dashboard .view-all-section a {
  color: #fff;
  font-weight: 500;
}
.main-section-title-of-stu-dashboard .view-all-section i {
  margin-right: 7px;
  display: inline-flex;
  width: 18px;
  height: 18px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid;
  font-size: 11px;
}
.main-section-title-of-stu-dashboard .view-all-section i.icon-chevron-down {
  transform: rotate(180deg);
}
.main-section-title-of-stu-dashboard .view-all-section.collapsed i {
  transform: rotate(0deg);
}
.main-section-title-of-stu-dashboard .view-all-section p {
  margin-bottom: 0;
  white-space: nowrap;
  font-weight: 500;
}

.inspire_notice_wrapper {
  padding: 10px 20px;
}
.inspire_notice_wrapper img {
  border-radius: 7px;
}
@media (max-width: 530px) {
  .inspire_notice_wrapper {
    padding: 10px 0;
  }
  .inspire_notice_wrapper img {
    border-radius: 3px;
  }
}

[id^=paged_block-10]:not(#paged_block-10) .paged_item .link {
  max-width: 160px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-body .dashboard-box-title .select-styled:after {
  left: 10px;
}

/*!
 * Datetimepicker for Bootstrap
 *
 */
.datetimepicker {
  padding: 4px;
  margin-top: 1px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  direction: ltr;
}

.datetimepicker-inline {
  width: 220px;
}

.datetimepicker.datetimepicker-rtl {
  direction: rtl;
}

.datetimepicker.datetimepicker-rtl table tr td span {
  float: right;
}

.datetimepicker-dropdown, .datetimepicker-dropdown-left {
  top: 0;
  left: 0;
}

[class*=" datetimepicker-dropdown"]:before {
  content: "";
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}

[class*=" datetimepicker-dropdown"]:after {
  content: "";
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
}

[class*=" datetimepicker-dropdown-top"]:before {
  content: "";
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #ccc;
  border-top-color: rgba(0, 0, 0, 0.2);
  border-bottom: 0;
}

[class*=" datetimepicker-dropdown-top"]:after {
  content: "";
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;
  border-bottom: 0;
}

.datetimepicker-dropdown-bottom-left:before {
  top: -7px;
  right: 6px;
}

.datetimepicker-dropdown-bottom-left:after {
  top: -6px;
  right: 7px;
}

.datetimepicker-dropdown-bottom-right:before {
  top: -7px;
  left: 6px;
}

.datetimepicker-dropdown-bottom-right:after {
  top: -6px;
  left: 7px;
}

.datetimepicker-dropdown-top-left:before {
  bottom: -7px;
  right: 6px;
}

.datetimepicker-dropdown-top-left:after {
  bottom: -6px;
  right: 7px;
}

.datetimepicker-dropdown-top-right:before {
  bottom: -7px;
  left: 6px;
}

.datetimepicker-dropdown-top-right:after {
  bottom: -6px;
  left: 7px;
}

.datetimepicker > div {
  display: none;
}

.datetimepicker.minutes div.datetimepicker-minutes {
  display: block;
}

.datetimepicker.hours div.datetimepicker-hours {
  display: block;
}

.datetimepicker.days div.datetimepicker-days {
  display: block;
}

.datetimepicker.months div.datetimepicker-months {
  display: block;
}

.datetimepicker.years div.datetimepicker-years {
  display: block;
}

.datetimepicker table {
  margin: 0;
}

.datetimepicker td, .datetimepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 0;
}

.table-striped .datetimepicker table tr td, .table-striped .datetimepicker table tr th {
  background-color: transparent;
}

.datetimepicker table tr td.minute:hover {
  background: #eee;
  cursor: pointer;
}

.datetimepicker table tr td.hour:hover {
  background: #eee;
  cursor: pointer;
}

.datetimepicker table tr td.day:hover {
  background: #eee;
  cursor: pointer;
}

.datetimepicker table tr td.old, .datetimepicker table tr td.new {
  color: #999;
}

.datetimepicker table tr td.disabled, .datetimepicker table tr td.disabled:hover {
  background: 0;
  color: #999;
  cursor: default;
}

.datetimepicker table tr td.today, .datetimepicker table tr td.today:hover, .datetimepicker table tr td.today.disabled, .datetimepicker table tr td.today.disabled:hover {
  background-color: #fde19a;
  background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
  background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: linear-gradient(top, #fdd49a, #fdf59a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdd49a",endColorstr="#fdf59a",GradientType=0);
  border-color: #fdf59a #fdf59a #fbed50;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.datetimepicker table tr td.today:hover, .datetimepicker table tr td.today:hover:hover, .datetimepicker table tr td.today.disabled:hover, .datetimepicker table tr td.today.disabled:hover:hover, .datetimepicker table tr td.today:active, .datetimepicker table tr td.today:hover:active, .datetimepicker table tr td.today.disabled:active, .datetimepicker table tr td.today.disabled:hover:active, .datetimepicker table tr td.today.active, .datetimepicker table tr td.today:hover.active, .datetimepicker table tr td.today.disabled.active, .datetimepicker table tr td.today.disabled:hover.active, .datetimepicker table tr td.today.disabled, .datetimepicker table tr td.today:hover.disabled, .datetimepicker table tr td.today.disabled.disabled, .datetimepicker table tr td.today.disabled:hover.disabled, .datetimepicker table tr td.today[disabled], .datetimepicker table tr td.today:hover[disabled], .datetimepicker table tr td.today.disabled[disabled], .datetimepicker table tr td.today.disabled:hover[disabled] {
  background-color: #fdf59a;
}

.datetimepicker table tr td.today:active, .datetimepicker table tr td.today:hover:active, .datetimepicker table tr td.today.disabled:active, .datetimepicker table tr td.today.disabled:hover:active, .datetimepicker table tr td.today.active, .datetimepicker table tr td.today:hover.active, .datetimepicker table tr td.today.disabled.active, .datetimepicker table tr td.today.disabled:hover.active {
  background-color: #fbf069;
}

.datetimepicker table tr td.active, .datetimepicker table tr td.active:hover, .datetimepicker table tr td.active.disabled, .datetimepicker table tr td.active.disabled:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #08c, #04c);
  background-image: -ms-linear-gradient(top, #08c, #04c);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c));
  background-image: -webkit-linear-gradient(top, #08c, #04c);
  background-image: -o-linear-gradient(top, #08c, #04c);
  background-image: linear-gradient(top, #08c, #04c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0088cc",endColorstr="#0044cc",GradientType=0);
  border-color: #04c #04c #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datetimepicker table tr td.active:hover, .datetimepicker table tr td.active:hover:hover, .datetimepicker table tr td.active.disabled:hover, .datetimepicker table tr td.active.disabled:hover:hover, .datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active:hover.active, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled:hover.active, .datetimepicker table tr td.active.disabled, .datetimepicker table tr td.active:hover.disabled, .datetimepicker table tr td.active.disabled.disabled, .datetimepicker table tr td.active.disabled:hover.disabled, .datetimepicker table tr td.active[disabled], .datetimepicker table tr td.active:hover[disabled], .datetimepicker table tr td.active.disabled[disabled], .datetimepicker table tr td.active.disabled:hover[disabled] {
  background-color: #04c;
}

.datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active:hover.active, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled:hover.active {
  background-color: #039;
}

.datetimepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.datetimepicker .datetimepicker-hours span {
  height: 26px;
  line-height: 26px;
}

.datetimepicker .datetimepicker-hours table tr td span.hour_am, .datetimepicker .datetimepicker-hours table tr td span.hour_pm {
  width: 14.6%;
}

.datetimepicker .datetimepicker-hours fieldset legend, .datetimepicker .datetimepicker-minutes fieldset legend {
  margin-bottom: inherit;
  line-height: 30px;
}

.datetimepicker .datetimepicker-minutes span {
  height: 26px;
  line-height: 26px;
}

.datetimepicker table tr td span:hover {
  background: #eee;
}

.datetimepicker table tr td span.disabled, .datetimepicker table tr td span.disabled:hover {
  background: 0;
  color: #999;
  cursor: default;
}

.datetimepicker table tr td span.active, .datetimepicker table tr td span.active:hover, .datetimepicker table tr td span.active.disabled, .datetimepicker table tr td span.active.disabled:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #08c, #04c);
  background-image: -ms-linear-gradient(top, #08c, #04c);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c));
  background-image: -webkit-linear-gradient(top, #08c, #04c);
  background-image: -o-linear-gradient(top, #08c, #04c);
  background-image: linear-gradient(top, #08c, #04c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0088cc",endColorstr="#0044cc",GradientType=0);
  border-color: #04c #04c #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datetimepicker table tr td span.active:hover, .datetimepicker table tr td span.active:hover:hover, .datetimepicker table tr td span.active.disabled:hover, .datetimepicker table tr td span.active.disabled:hover:hover, .datetimepicker table tr td span.active:active, .datetimepicker table tr td span.active:hover:active, .datetimepicker table tr td span.active.disabled:active, .datetimepicker table tr td span.active.disabled:hover:active, .datetimepicker table tr td span.active.active, .datetimepicker table tr td span.active:hover.active, .datetimepicker table tr td span.active.disabled.active, .datetimepicker table tr td span.active.disabled:hover.active, .datetimepicker table tr td span.active.disabled, .datetimepicker table tr td span.active:hover.disabled, .datetimepicker table tr td span.active.disabled.disabled, .datetimepicker table tr td span.active.disabled:hover.disabled, .datetimepicker table tr td span.active[disabled], .datetimepicker table tr td span.active:hover[disabled], .datetimepicker table tr td span.active.disabled[disabled], .datetimepicker table tr td span.active.disabled:hover[disabled] {
  background-color: #04c;
}

.datetimepicker table tr td span.active:active, .datetimepicker table tr td span.active:hover:active, .datetimepicker table tr td span.active.disabled:active, .datetimepicker table tr td span.active.disabled:hover:active, .datetimepicker table tr td span.active.active, .datetimepicker table tr td span.active:hover.active, .datetimepicker table tr td span.active.disabled.active, .datetimepicker table tr td span.active.disabled:hover.active {
  background-color: #039;
}

.datetimepicker table tr td span.old {
  color: #999;
}

.datetimepicker th.switch {
  width: 145px;
}

.datetimepicker th span.glyphicon {
  pointer-events: none;
}

.datetimepicker thead tr:first-child th, .datetimepicker tfoot tr:first-child th {
  cursor: pointer;
}

.datetimepicker thead tr:first-child th:hover, .datetimepicker tfoot tr:first-child th:hover {
  background: #eee;
}

.input-append.date .add-on i, .input-prepend.date .add-on i, .input-group.date .input-group-addon span {
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.hijriDateCalendarDay {
  color: var(--main-color);
  width: 10px;
  height: 10px;
  text-align: center;
  margin: 1px;
  border-radius: 3px;
  font-size: 11px;
  display: block;
  position: relative;
  bottom: 1px;
  left: 3px;
  line-height: 14px;
}

.hijriDateCalendarHeader {
  color: var(--main-color);
  font-size: 12px;
  font-weight: normal;
  line-height: normal;
  margin: 0;
}

/* 
    Created on : Apr 11, 2016, 4:21:56 PM
    Author     : kamelj
*/
@media print {
  @page {
    /*size: 297mm 210mm;  landscape
    margin: 0mm;
    margin-right: 0mm;  for compatibility with both A4 and Letter */
  }
  body {
    background: none !important;
    visibility: hidden;
  }

  #page-container {
    min-height: 0px !important;
  }

  .page-content {
    margin: 0px !important;
  }

  #content_wrapper {
    visibility: visible;
  }

  #sidebar {
    display: none !important;
  }

  #content_wrapper {
    position: absolute;
    left: 0;
    top: 0;
    background-color: white;
    height: 100%;
    width: 100%;
    margin: 0px;
  }

  .actions {
    display: none;
  }

  .tabbable .nav-tabs {
    display: none;
  }

  .autosearch_label {
    display: none;
  }

  .form-actions {
    display: none;
  }

  .btn {
    display: none;
  }

  thead, tr {
    background-color: #179fd5 !important;
  }

  .filters {
    display: none;
  }

  table.sticky-header tbody, table.sticky-header theadtable.sticky-header tbody, table.sticky-header thead {
    display: table !important;
  }

  .page-sidebar, .page-breadcrumbs, .breadcrumb, .page-header, .navbar-inner {
    display: none !important;
  }

  .page-content {
    margin-left: 0px !important;
    width: 100% !important;
  }

  .beta_version {
    display: none;
  }

  .header-buttons {
    display: none;
  }

  .tab {
    visibility: hidden;
  }

  .actions ul li {
    display: none;
  }

  #grid_autosearch {
    display: none;
  }

  a[href]:after {
    content: none !important;
  }

  .hide-on-print {
    display: none;
  }
}
body.swal2-shown {
  overflow-y: hidden;
}

body.swal2-iosfix {
  position: fixed;
  left: 0;
  right: 0;
}

.swal2-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 10px;
  background-color: transparent;
  z-index: 999999999999;
}

.swal2-container.swal2-fade {
  -webkit-transition: background-color 0.1s;
  transition: background-color 0.1s;
}

.swal2-container.swal2-shown {
  background-color: rgba(0, 0, 0, 0.4);
}

.swal2-modal {
  background-color: #fff;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  display: none;
  position: relative;
  max-width: 100%;
  min-width: 370px;
}

.swal2-modal:focus {
  outline: 0;
}

.swal2-modal.swal2-loading {
  overflow-y: hidden;
}

.swal2-modal .swal2-title {
  color: #595959;
  font-size: 20px;
  text-align: center;
  font-weight: 400;
  text-transform: none;
  position: relative;
  margin: 0 0 0.4em;
  padding: 5px;
  display: block;
  word-wrap: break-word;
}

.swal2-modal .swal2-buttonswrapper {
  margin-top: 15px;
}

.swal2-modal .swal2-buttonswrapper:not(.swal2-loading) .swal2-styled[disabled] {
  opacity: 0.4;
  cursor: no-drop;
}

.swal2-modal .swal2-buttonswrapper.swal2-loading .swal2-styled.swal2-confirm {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 4px solid transparent;
  border-color: transparent;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 7.5px;
  vertical-align: top;
  background-color: transparent !important;
  color: transparent;
  cursor: default;
  border-radius: 100%;
  -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  animation: rotate-loading 1.5s linear 0s infinite normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-modal .swal2-buttonswrapper.swal2-loading .swal2-styled.swal2-cancel {
  margin-left: 30px;
  margin-right: 30px;
}

.swal2-modal .swal2-buttonswrapper.swal2-loading :not(.swal2-styled).swal2-confirm::after {
  display: inline-block;
  content: "";
  margin-left: 5px 0 15px;
  vertical-align: -1px;
  height: 15px;
  width: 15px;
  border: 3px solid #999;
  -webkit-box-shadow: 1px 1px 1px #fff;
  box-shadow: 1px 1px 1px #fff;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  animation: rotate-loading 1.5s linear 0s infinite normal;
}

.swal2-modal .swal2-styled {
  border: 0;
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  margin: 15px 5px 0;
  padding: 10px 32px;
}

.swal2-modal .swal2-image {
  margin: 20px auto;
  max-width: 100%;
}

.swal2-modal .swal2-close {
  background: 0 0;
  border: 0;
  margin: 0;
  padding: 0;
  width: 38px;
  height: 40px;
  font-size: 25px;
  line-height: 20px;
  font-family: serif;
  position: absolute;
  top: 5px;
  right: 8px;
  cursor: pointer;
  color: #ccc;
  -webkit-transition: color 0.1s ease;
  transition: color 0.1s ease;
}

.swal2-modal .swal2-close:hover {
  color: #d55;
}

.swal2-modal > .swal2-checkbox, .swal2-modal > .swal2-file, .swal2-modal > .swal2-input, .swal2-modal > .swal2-radio, .swal2-modal > .swal2-select, .swal2-modal > .swal2-textarea {
  display: none;
}

.swal2-modal .swal2-content {
  font-size: 15px;
  text-align: center;
  font-weight: 300;
  position: relative;
  float: none;
  margin: 0;
  padding: 0;
  line-height: normal;
  color: #545454;
  word-wrap: break-word;
}

.swal2-modal .swal2-checkbox, .swal2-modal .swal2-file, .swal2-modal .swal2-input, .swal2-modal .swal2-radio, .swal2-modal .swal2-select, .swal2-modal .swal2-textarea {
  margin: 20px auto;
}

.swal2-modal .swal2-file, .swal2-modal .swal2-input, .swal2-modal .swal2-textarea {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 18px;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
  -webkit-transition: border-color box-shadow 0.3s;
  transition: border-color box-shadow 0.3s;
}

.swal2-modal .swal2-file.swal2-inputerror, .swal2-modal .swal2-input.swal2-inputerror, .swal2-modal .swal2-textarea.swal2-inputerror {
  border-color: #f27474 !important;
  -webkit-box-shadow: 0 0 2px #f27474 !important;
  box-shadow: 0 0 2px #f27474 !important;
}

.swal2-modal .swal2-file:focus, .swal2-modal .swal2-input:focus, .swal2-modal .swal2-textarea:focus {
  outline: 0;
  border: 1px solid #b4dbed;
  -webkit-box-shadow: 0 0 3px #c4e6f5;
  box-shadow: 0 0 3px #c4e6f5;
}

.swal2-modal .swal2-file:focus::-webkit-input-placeholder, .swal2-modal .swal2-input:focus::-webkit-input-placeholder, .swal2-modal .swal2-textarea:focus::-webkit-input-placeholder {
  -webkit-transition: opacity 0.3s 0.03s ease;
  transition: opacity 0.3s 0.03s ease;
  opacity: 0.8;
}

.swal2-modal .swal2-file:focus:-ms-input-placeholder, .swal2-modal .swal2-input:focus:-ms-input-placeholder, .swal2-modal .swal2-textarea:focus:-ms-input-placeholder {
  -webkit-transition: opacity 0.3s 0.03s ease;
  transition: opacity 0.3s 0.03s ease;
  opacity: 0.8;
}

.swal2-modal .swal2-file:focus::placeholder, .swal2-modal .swal2-input:focus::placeholder, .swal2-modal .swal2-textarea:focus::placeholder {
  -webkit-transition: opacity 0.3s 0.03s ease;
  transition: opacity 0.3s 0.03s ease;
  opacity: 0.8;
}

.swal2-modal .swal2-file::-webkit-input-placeholder, .swal2-modal .swal2-input::-webkit-input-placeholder, .swal2-modal .swal2-textarea::-webkit-input-placeholder {
  color: #e6e6e6;
}

.swal2-modal .swal2-file:-ms-input-placeholder, .swal2-modal .swal2-input:-ms-input-placeholder, .swal2-modal .swal2-textarea:-ms-input-placeholder {
  color: #e6e6e6;
}

.swal2-modal .swal2-file::placeholder, .swal2-modal .swal2-input::placeholder, .swal2-modal .swal2-textarea::placeholder {
  color: #e6e6e6;
}

.swal2-modal .swal2-range input {
  float: left;
  width: 80%;
}

.swal2-modal .swal2-range output {
  float: right;
  width: 20%;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.swal2-modal .swal2-range input, .swal2-modal .swal2-range output {
  height: 43px;
  line-height: 43px;
  vertical-align: middle;
  margin: 20px auto;
  padding: 0;
}

.swal2-modal .swal2-input {
  height: 43px;
  padding: 0 12px;
}

.swal2-modal .swal2-input[type=number] {
  max-width: 150px;
}

.swal2-modal .swal2-file {
  font-size: 20px;
}

.swal2-modal .swal2-textarea {
  height: 108px;
  padding: 12px;
}

.swal2-modal .swal2-select {
  color: #545454;
  font-size: inherit;
  padding: 5px 10px;
  min-width: 40%;
  max-width: 100%;
}

.swal2-modal .swal2-radio {
  border: 0;
}

.swal2-modal .swal2-radio label:not(:first-child) {
  margin-left: 20px;
}

.swal2-modal .swal2-radio input, .swal2-modal .swal2-radio span {
  vertical-align: middle;
}

.swal2-modal .swal2-radio input {
  margin: 0 3px 0 0;
}

.swal2-modal .swal2-checkbox {
  color: #545454;
}

.swal2-modal .swal2-checkbox input, .swal2-modal .swal2-checkbox span {
  vertical-align: middle;
}

.swal2-modal .swal2-checkbox span {
  margin: 0 10px;
}

.swal2-modal .swal2-validationerror {
  background-color: #f0f0f0;
  margin: 0 -20px;
  overflow: hidden;
  padding: 10px;
  color: gray;
  font-size: 16px;
  font-weight: 300;
  display: none;
}

.swal2-modal .swal2-validationerror::before {
  content: "!";
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ea7d7d;
  color: #fff;
  line-height: 24px;
  text-align: center;
  margin-right: 10px;
}

@supports (-ms-accelerator: true) {
  .swal2-range input {
    width: 100% !important;
  }

  .swal2-range output {
    display: none;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-range input {
    width: 100% !important;
  }

  .swal2-range output {
    display: none;
  }
}
.swal2-icon {
  width: 80px;
  height: 80px;
  border: 4px solid transparent;
  border-radius: 50%;
  margin: 20px auto 30px;
  padding: 0;
  position: relative;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-icon.swal2-error {
  border-color: #f27474;
}

.swal2-icon.swal2-error .swal2-x-mark {
  position: relative;
  display: block;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  position: absolute;
  height: 5px;
  width: 47px;
  background-color: #f27474;
  display: block;
  top: 37px;
  border-radius: 2px;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 17px;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 16px;
}

.swal2-icon.swal2-warning {
  color: #f8bb86;
  border-color: #facea8;
  font-size: 60px;
  line-height: 80px;
  text-align: center;
}

.swal2-icon.swal2-info {
  font-family: "Open Sans", sans-serif;
  color: #9de0f6;
  border-color: #9de0f6;
  font-size: 60px;
  line-height: 80px;
  text-align: center;
}

.swal2-icon.swal2-question {
  color: #87adbd;
  border-color: #c9dae1;
  font-size: 60px;
  line-height: 80px;
  text-align: center;
}

.swal2-icon.swal2-success {
  border-color: #a5dc86;
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line] {
  border-radius: 50%;
  position: absolute;
  width: 60px;
  height: 120px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left] {
  border-radius: 120px 0 0 120px;
  top: -7px;
  left: -33px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 60px 60px;
  transform-origin: 60px 60px;
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right] {
  border-radius: 0 120px 120px 0;
  top: -11px;
  left: 30px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 60px;
  transform-origin: 0 60px;
}

.swal2-icon.swal2-success .swal2-success-ring {
  width: 80px;
  height: 80px;
  border: 4px solid rgba(165, 220, 134, 0.2);
  border-radius: 50%;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 2;
}

.swal2-icon.swal2-success .swal2-success-fix {
  width: 7px;
  height: 90px;
  position: absolute;
  left: 28px;
  top: 8px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
  height: 5px;
  background-color: #a5dc86;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 2;
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
  width: 25px;
  left: 14px;
  top: 46px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
  width: 47px;
  right: 8px;
  top: 38px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.swal2-progresssteps {
  font-weight: 600;
  margin: 0 0 20px;
  padding: 0;
}

.swal2-progresssteps li {
  display: inline-block;
  position: relative;
}

.swal2-progresssteps .swal2-progresscircle {
  background: #3085d6;
  border-radius: 2em;
  color: #fff;
  height: 2em;
  line-height: 2em;
  text-align: center;
  width: 2em;
  z-index: 20;
}

.swal2-progresssteps .swal2-progresscircle:first-child {
  margin-left: 0;
}

.swal2-progresssteps .swal2-progresscircle:last-child {
  margin-right: 0;
}

.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep {
  background: #3085d6;
}

.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep ~ .swal2-progresscircle {
  background: #add8e6;
}

.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep ~ .swal2-progressline {
  background: #add8e6;
}

.swal2-progresssteps .swal2-progressline {
  background: #3085d6;
  height: 0.4em;
  margin: 0 -1px;
  z-index: 10;
}

[class^=swal2] {
  -webkit-tap-highlight-color: transparent;
}

@-webkit-keyframes showSweetAlert {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  45% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  80% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes showSweetAlert {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  45% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  80% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes hideSweetAlert {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes hideSweetAlert {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }
}
.swal2-show {
  -webkit-animation: showSweetAlert 0.3s;
  animation: showSweetAlert 0.3s;
}

.swal2-show.swal2-noanimation {
  -webkit-animation: none;
  animation: none;
}

.swal2-hide {
  -webkit-animation: hideSweetAlert 0.15s forwards;
  animation: hideSweetAlert 0.15s forwards;
}

.swal2-hide.swal2-noanimation {
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes animate-success-tip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@keyframes animate-success-tip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@-webkit-keyframes animate-success-long {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
@keyframes animate-success-long {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
@-webkit-keyframes rotatePlaceholder {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  5% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  12% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }
  100% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }
}
@keyframes rotatePlaceholder {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  5% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  12% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }
  100% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }
}
.swal2-animate-success-line-tip {
  -webkit-animation: animate-success-tip 0.75s;
  animation: animate-success-tip 0.75s;
}

.swal2-animate-success-line-long {
  -webkit-animation: animate-success-long 0.75s;
  animation: animate-success-long 0.75s;
}

.swal2-success.swal2-animate-success-icon .swal2-success-circular-line-right {
  -webkit-animation: rotatePlaceholder 4.25s ease-in;
  animation: rotatePlaceholder 4.25s ease-in;
}

@-webkit-keyframes animate-error-icon {
  0% {
    -webkit-transform: rotateX(100deg);
    transform: rotateX(100deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes animate-error-icon {
  0% {
    -webkit-transform: rotateX(100deg);
    transform: rotateX(100deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
}
.swal2-animate-error-icon {
  -webkit-animation: animate-error-icon 0.5s;
  animation: animate-error-icon 0.5s;
}

@-webkit-keyframes animate-x-mark {
  0% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    margin-top: -6px;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    margin-top: 0;
    opacity: 1;
  }
}
@keyframes animate-x-mark {
  0% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    margin-top: -6px;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    margin-top: 0;
    opacity: 1;
  }
}
.swal2-animate-x-mark {
  -webkit-animation: animate-x-mark 0.5s;
  animation: animate-x-mark 0.5s;
}

@-webkit-keyframes rotate-loading {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-loading {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* Page */
.page-content {
  top: 0 !important;
}

.page-header {
  display: none;
}

#scoreBar #label {
  font-size: 1.2em;
  color: #fff;
}

.page-breadcrumbs {
  background: transparent;
}
.page-breadcrumbs .child-basic-info {
  color: #fff;
}
.page-breadcrumbs .child-basic-info a, .page-breadcrumbs .child-basic-info a:hover, .page-breadcrumbs .child-basic-info a:focus {
  color: #fff;
}
.page-breadcrumbs .child-basic-info img {
  margin-right: 5px;
}

.page-breadcrumbs #print-page-content {
  color: #9B9B9B;
}

.breadcrumb > li {
  font-size: 16px;
  color: #fff;
  font-weight: 300;
  white-space: nowrap;
}

.breadcrumb > li > a {
  color: #fff;
}

.breadcrumb > li + li:before {
  color: #fff;
  content: "/";
}

#announcements {
  padding: 10px 21px !important;
  background: transparent;
}
#announcements .widget-buttons-slider {
  text-align: right;
  padding-left: 100px;
}
#announcements #announcement_bottom {
  padding: 10px 15px 0;
  position: relative;
}
#announcements .show_more_box {
  text-align: left;
  position: absolute;
  left: 15px;
  bottom: 10px;
}
#announcements .show_more_box .btn {
  border-radius: 25px;
  padding: 5px 20px;
}
#announcements .widget-body {
  height: 150px;
}
@media screen and (max-width: 950px) {
  #announcements .widget-body {
    height: 100px;
  }
}
#announcements .widget-body img {
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  height: auto !important;
  border-radius: 5px;
}
@media screen and (max-width: 550px) {
  #announcements {
    padding: 10px !important;
  }
}

#announcements .widget {
  margin: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

#announcements .widget-header {
  /*border-bottom: 1px solid $bg_d;*/
}
#announcements .widget-header > .widget-caption {
  font-weight: 600 !important;
  font-size: 14px;
}

#announcements .container-fluid {
  padding: 0 0;
}

#announcements .pagination li a {
  width: 22px !important;
  height: 22px !important;
  padding: 4px 1px;
  font-size: 9px;
  margin: 5px;
  border-radius: 50% !important;
}

#announcements .pagination li.active a {
  color: #FFF;
  background: var(--main-color);
  border: 0;
}

#announcements .widget-header a {
  color: var(--dark-blue-color);
}

#announcements .widget-body {
  background: #fff !important;
}
#announcements .widget-body::-webkit-scrollbar {
  background-color: transparent;
  border-radius: 10px;
  height: auto;
  width: 7px;
}
#announcements .widget-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

.page-content {
  margin-right: 250px;
}

@media (min-width: 880px) {
  .page-container.minimize-sidebar .page-content {
    margin-right: 90px;
  }
}
.navbar .sidebar-collapse:hover {
  box-shadow: none;
}

@media only screen and (max-width: 880px) {
  .page-content {
    margin-right: 0;
  }
}
.chosen-container-single .chosen-single {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 25px;
  height: 44px;
  font-size: 14px;
  color: #808080;
  line-height: 43px;
  box-shadow: none;
  padding: 0 20px;
}

.chosen-container-single .chosen-single div b {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTAgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgPGRlZnM+PC9kZWZzPiAgPGcgaWQ9IkhvbWVwYWdlcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgPGcgaWQ9IlN0dWRlbnQtSG9tZXBhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTYuMDAwMDAwLCAtMTYwLjAwMDAwMCkiIGZpbGw9IiM5RTlFOUUiPiAgICAgICAgICA8ZyBpZD0iRG9tYWluLXNlbGVjdG9yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4wMDAwMDAsIDE0Ni4wMDAwMDApIj4gICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMTAuODE0Mzc1LDI0LjEzNTMzMzMgTDIwNi40MzkzNzUsMjguODAyIEMyMDYuMzE1NjI1LDI4LjkzNCAyMDYuMTY5MTY3LDI5IDIwNiwyOSBDMjA1LjgzMDgzMywyOSAyMDUuNjg0Mzc1LDI4LjkzNCAyMDUuNTYwNjI1LDI4LjgwMiBMMjAxLjE4NTYyNSwyNC4xMzUzMzMzIEMyMDEuMDYxODc1LDI0LjAwMzMzMzMgMjAxLDIzLjg0NzExMTEgMjAxLDIzLjY2NjY2NjcgQzIwMSwyMy40ODYyMjIyIDIwMS4wNjE4NzUsMjMuMzMgMjAxLjE4NTYyNSwyMy4xOTggQzIwMS4zMDkzNzUsMjMuMDY2IDIwMS40NTU4MzMsMjMgMjAxLjYyNSwyMyBMMjEwLjM3NSwyMyBDMjEwLjU0NDE2NywyMyAyMTAuNjkwNjI1LDIzLjA2NiAyMTAuODE0Mzc1LDIzLjE5OCBDMjEwLjkzODEyNSwyMy4zMyAyMTEsMjMuNDg2MjIyMiAyMTEsMjMuNjY2NjY2NyBDMjExLDIzLjg0NzExMTEgMjEwLjkzODEyNSwyNC4wMDMzMzMzIDIxMC44MTQzNzUsMjQuMTM1MzMzMyBaIE0yMDEuMTg1NjI1LDE4Ljg2NDY2NjcgTDIwNS41NjA2MjUsMTQuMTk4IEMyMDUuNjg0Mzc1LDE0LjA2NiAyMDUuODMwODMzLDE0IDIwNiwxNCBDMjA2LjE2OTE2NywxNCAyMDYuMzE1NjI1LDE0LjA2NiAyMDYuNDM5Mzc1LDE0LjE5OCBMMjEwLjgxNDM3NSwxOC44NjQ2NjY3IEMyMTAuOTM4MTI1LDE4Ljk5NjY2NjcgMjExLDE5LjE1Mjg4ODkgMjExLDE5LjMzMzMzMzMgQzIxMSwxOS41MTM3Nzc4IDIxMC45MzgxMjUsMTkuNjcgMjEwLjgxNDM3NSwxOS44MDIgQzIxMC42OTA2MjUsMTkuOTM0IDIxMC41NDQxNjcsMjAgMjEwLjM3NSwyMCBMMjAxLjYyNSwyMCBDMjAxLjQ1NTgzMywyMCAyMDEuMzA5Mzc1LDE5LjkzNCAyMDEuMTg1NjI1LDE5LjgwMiBDMjAxLjA2MTg3NSwxOS42NyAyMDEsMTkuNTEzNzc3OCAyMDEsMTkuMzMzMzMzMyBDMjAxLDE5LjE1Mjg4ODkgMjAxLjA2MTg3NSwxOC45OTY2NjY3IDIwMS4xODU2MjUsMTguODY0NjY2NyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4gICAgICAgICAgPC9nPiAgICAgIDwvZz4gIDwvZz48L3N2Zz4=) no-repeat;
  margin-top: 14px;
}

/* Admin Dashboard */
.dashboard-block .tabed-box {
  padding-top: 130px;
  height: 535px;
  overflow-y: auto;
}

.dashboard-box:not(.tabed-box) .box-header {
  width: 100%;
  padding: 0;
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
}

.dashboard-box .box-header h2 {
  font-weight: 300 !important;
  color: #9FA9BA !important;
  text-transform: uppercase;
  font-size: 1em !important;
  line-height: 30px;
}

.dashboard-box.tabed-box .nav-tabs {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
}

.dashboard-box .nav-tabs li {
  width: auto !important;
}

.dashboard-box .box-tabbs .tabbable .nav-tabs li a {
  border: 0 !important;
  color: #7F8FA4;
}

.dashboard-box .box-tabbs .tabbable .nav-tabs li.active a {
  border: 0 !important;
  color: #36CFDC;
  background: transparent !important;
}

.dashboard-block {
  background: transparent;
  box-shadow: none;
  margin-bottom: 16px;
}

.dashboard-block .users_list_container {
  list-style: none;
  background: #fff;
}

.dashboard-block .users_list_container li {
  border-bottom: 1px solid #EBF0F4;
  position: relative;
  padding-right: 100px;
  height: 100px;
}
.dashboard-block .users_list_container li.no-data-found {
  text-align: center;
  padding: 0;
  border-bottom: 0;
}

.dashboard-block .users_list_container li span {
  margin-top: 10px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
  width: 100%;
}

.dashboard-block .users_list_container li img {
  position: absolute;
  top: 16px;
  right: 16px;
  border-radius: 50%;
  width: 70px;
}

.dashboard-block .users_list_container li .main_text a {
  font-size: 0.9em;
  color: #444;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 90%;
  display: inline-block;
}

.dashboard-block .users_list_container li .sub_text_details {
  color: #777;
  font-size: 0.9em;
}

.dashboard-block .users_list_container li .sub_text {
  color: #9B9B9B;
  font-size: 1em;
  position: relative;
  top: -5px;
}

.dashboard-box:not(.tabed-box) .tab-content {
  background: #fff;
  height: 300px;
  overflow-y: auto;
}

.dashboard-box:not(.tabed-box) .nav-tabs li {
  padding: 0 6px !important;
  margin: 0 !important;
  height: 35px;
  border-radius: 0 !important;
}

.dashboard-box:not(.tabed-box) .nav-tabs li a {
  color: #5C5C5C !important;
  border: 0 !important;
  background: #FFF !important;
  box-shadow: none;
  padding: 0 16px !important;
  min-height: 37px !important;
  height: 35px;
  line-height: 35px !important;
  font-size: 1.2em;
  border-radius: 0 !important;
  box-shadow: none;
}

.dashboard-box:not(.tabed-box) .nav-tabs li.active a, .dashboard-box:not(.tabed-box) .nav-tabs li a:hover {
  border-bottom: 3px solid var(--main-color) !important;
  box-shadow: none;
}

h3.box-header {
  width: 100%;
  padding: 0;
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
  font-weight: 300 !important;
  text-align: right;
  margin: 0 !important;
  text-transform: uppercase;
  color: #9FA9BA !important;
}

#dashboard .chart_container {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  width: 100%;
}
#dashboard .chart_container:not(.admin-dashboard-box) {
  border-radius: 4px;
}

.dashboard-box #right_now {
  position: absolute;
  top: 110px;
  right: 80px;
  z-index: 2;
  width: 100px;
}

.dashboard-box #stats_now {
  position: absolute;
  top: 130px;
  right: 56px;
  z-index: 2;
  width: 100px;
  font-size: 1.3em;
}

.vertical_list ul {
  box-shadow: none;
  border-radius: 4px;
  margin: 0;
}

.vertical_list ul.scrollable {
  height: 600px;
  overflow-y: auto;
}

.vertical_list ul.scrollable.short {
  height: 288px;
  background: #fff;
}

.vertical_list ul h3.list_title {
  background: #fff;
  color: #9FA9BA;
  text-shadow: none;
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
  font-size: 1.2em;
}

.widget-header, div#annoucements01 {
  box-shadow: none;
}

/* Buttons */
.btn-primary,
.btn-primary:focus {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: #ffffff;
}

.btn-primary:hover, .open .btn-primary.dropdown-toggle {
  background-color: rgba(var(--main-color-rgb), 90%) !important;
  border-color: rgba(var(--main-color-rgb), 90%) !important;
}

.btn-group .btn-primary:not(:first-child) {
  border-right: 1px solid var(--main-color) !important;
}

.btn-group .btn-group .btn-primary {
  border-right: 1px solid var(--main-color) !important;
  height: 59px;
}

.actions .btn-group > .btn, .actions button {
  border-radius: 25px !important;
  margin: 0 3px;
  height: 50px;
  padding-top: 1px;
  margin-bottom: 10px;
}

.btn-group .btn-group .dropdown-menu ul {
  padding: 0;
  margin: 0;
}

.btn-group .btn-group .dropdown-menu li {
  width: 100%;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

.btn-group .btn-group .dropdown-menu a {
  background: transparent !important;
  color: #444;
  display: block;
  box-shadow: none !important;
  margin: 8px !important;
}

.btn-group .btn .dropdown-menu li:hover {
  background: #eee !important;
}

.actions > ul {
  display: none;
}

/* Grid Search */
.grid__autosearch {
  overflow: hidden;
  max-height: 128px;
  position: relative;
  padding-bottom: 100px !important;
}

.grid__autosearch.advanced-search {
  max-height: 100%;
}

.grid__autosearch #advanced_search {
  position: absolute;
  bottom: 0px;
  right: 0;
  border: 0;
  background: #fff;
  color: #FFF;
  text-align: center;
  width: 100%;
  z-index: 22;
  height: 35px;
}

.grid__autosearch #advanced_search:before {
  content: "";
  display: block;
  background: var(--main-color);
  width: 100%;
  height: 5px;
  position: absolute;
  top: 0;
  right: 0;
}

.grid__autosearch #advanced_search:after {
  content: "";
  display: block;
  background: var(--main-color);
  width: 200px;
  height: 30px;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  border-radius: 0 0 50px 50px;
}

.grid__autosearch #advanced_search i:before {
  font: normal normal normal 14px/1 FontAwesome;
  content: " \f0d7";
}

.grid__autosearch.advanced-search #advanced_search i:before {
  content: " \f0d8";
}

@media screen and (max-width: 730px) {
  .dashboard-block .tabed-box {
    padding-top: 350px;
    overflow-y: auto;
  }

  .dashboard-box.tabed-box .box-header {
    top: 200px;
  }

  .dashboard-box.tabed-box .nav-tabs {
    width: 100%;
  }

  #walkthrough_button, .hopscotch-bubble {
    display: none;
  }

  body {
    width: 100% !important;
    overflow-x: hidden;
  }
}
#school_chart, #school_courses_chart {
  width: 100%;
  height: 500px !important;
  overflow: hidden;
}

/*#dashboard-chart-realtime{
  height: 375px !important;
}*/
.dashboard-block.select-school {
  height: 45px;
}

.dashboard-block.select-school .dashboard-box {
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.dashboard-box #school_selection {
  width: 100% !important;
}

.dashboard-box .chosen-container {
  margin: 0;
}

.content-stats ul {
  margin: 0;
  padding: 0;
}

.content-stats li {
  list-style: none;
  display: inline-block;
  width: 19%;
  padding: 0;
  margin: 0;
  min-width: 125px;
  margin-left: 10px;
}

.content-stats li span {
  display: block;
  font-size: 1.5em;
}

.content-stats li strong {
  display: block;
  font-size: 2.1em;
  font-weight: 300;
}

.content-stats li i {
  font-style: normal;
  display: block;
  font-size: 1.2em;
  color: #5492e3;
}

.right_now_container {
  height: 215px;
  text-align: center;
}

.ui-jqgrid tr.jqgrow td {
  overflow: visible !important;
}

.btn-grid {
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #666;
}

.btn-grid .caret {
  border-top-color: #666 !important;
}

.btn-grid:hover, .btn-grid:focus {
  color: #999;
}

.dropdown-login-area .btn-primary,
.dropdown-login-area .btn-primary:focus {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: #ffffff;
}

.dropdown-login-area .btn-primary.active {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
}

.dropdown-login-area .btn-primary:hover {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  color: #fff;
}

#sons_list_wrapper .view-profile {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: #3bc9dd;
  color: #FFF;
  opacity: 0;
  transition: 0.2s opacity ease;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  line-height: 110px;
  margin: 10px;
}

#sons_list_wrapper .view-profile:hover {
  opacity: 1;
}

#absences_table_details {
  max-height: 270px;
  overflow: auto;
}

a.show_absences_school_details {
  display: block;
  position: relative;
  width: 35px;
  height: 35px;
  background: var(--main-color);
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 50px;
  font-size: 1em;
  color: #FFF !important;
}

a.show_absences_school_details:before {
  content: "\f067";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

a.show_absences_school_details.is-table {
  background: rgba(var(--main-color-rgb), 90%);
}

a.show_absences_school_details.is-table:before {
  content: "\f068";
}

.dashboard-box.well .header {
  position: relative;
}

.dashboard-box th.headerSortUp {
  background-image: url(/img/asc.gif) !important;
}

.dashboard-box th.headerSortDown {
  background-image: url(/img/desc.gif) !important;
}

.dashboard-box th.header {
  background-image: url(/img/bg.gif);
  cursor: pointer;
  font-weight: bold;
  background-repeat: no-repeat;
  background-position: center right;
  padding-right: 20px !important;
  margin-right: -1px;
}

.dashboard-box .nav-tabs.nav-justified > li {
  display: table-cell;
  width: 1%;
  border-bottom: 0;
}

#sons_list_wrapper .databox.databox-vertical.databox-xlg {
  height: auto;
}

#sons_list_wrapper .databox.databox-vertical.databox-xlg.databox-halved .databox-bottom {
  height: 80px;
}

#sons_list_wrapper .btn-darkorange {
  white-space: normal;
}

.itemTitle:before {
  position: absolute;
  right: 5px;
  bottom: 0px;
  background: var(--main-color);
  content: "";
  width: 80px;
  height: 3px;
}

.questionWidgetBox .questionNumber {
  color: #ffffff;
  font-weight: bold;
  float: right;
  margin-top: 9px;
  width: 50px;
  height: 26px;
  position: relative;
  margin-right: -21px;
  text-align: left;
  display: block;
  padding-left: 16px !important;
  font-size: 16px !important;
}

.answer .answerNumber {
  margin: 0 5px 0 0;
  border: 1px solid #3bc9df;
  padding: 1px 4px;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  background: #fff;
  color: #3bc9df;
  position: absolute;
  margin-top: -5px;
  right: 18px;
  min-width: 28px;
  text-align: center;
  min-height: 28px;
  padding-top: 5px;
}

.manageSchedule .box > h3:before {
  right: 2px;
}

#sections_list {
  margin-top: 5px;
  border: 1px solid #eee;
  padding: 10px 20px;
  border-radius: 5px;
  background: #fff;
}

label[for=sections_select_all] {
  margin: 0 5px 10px;
}

form.navbar-form.navbar-default button {
  margin: 0;
}

.createDiscModalBtn {
  padding: 10px;
  vertical-align: top;
}

.actions .btn-group > .btn-group .btn {
  padding-top: 2px;
}

#AssessmentItemsRangesForm fieldset legend:before {
  background: transparent;
}

/*form padding */
#AssignmentCreateKaganForm, #AssignmentExamsMarkComparisonForm {
  padding: 20px;
}

.well.ui-dialog-content.ui-widget-content {
  background: #fff;
}

.well.ui-dialog-content.ui-widget-content .grid__autosearch {
  padding-bottom: 0 !important;
}

.well.ui-dialog-content.ui-widget-content .fancy_link {
  background: var(--main-color);
  padding: 12px 32px;
  border-radius: 25px;
  color: #fff;
}

#sections_list #sections_list {
  padding: 0;
}

/*absolute_form_side_panel*/
.MessageShareIdeasFormBox .absolute_form_side_panel, .studentbehaviors .absolute_form_side_panel, .EportfolioAddBox .absolute_form_side_panel {
  bottom: 10%;
  right: 17% !important;
  left: auto;
  top: auto;
  height: 347px;
  width: 67%;
}

.page-body .MessageShareIdeasFormBox form, .page-body .studentbehaviors form, .page-body .EportfolioAddBox form {
  padding-bottom: 385px;
  position: relative;
}

.MessageShareIdeasFormBox #MessageShareIdeasForm button, .studentbehaviors form input[type=submit], .EportfolioAddBox form input[type=submit] {
  position: absolute;
  bottom: 30px;
}

.MessageShareIdeasFormBox .upload_attachment_wrapper, .studentbehaviors .upload_attachment_wrapper, .EportfolioAddBox .upload_attachment_wrapper {
  text-align: right !important;
  background: transparent;
}

.studentbehaviors, .EportfolioAddBox {
  position: relative;
}

.studentbehaviors .absolute_form_side_panel {
  bottom: 7%;
}

.actions #add_new_question_dropdown_button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin: 0;
  height: 45px;
}

.actions #add_new_question_dropdown_button_arrow, #add_new_question_dropdown_button_arrow {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 25px !important;
  border-bottom-left-radius: 25px !important;
  margin: 0;
  height: 45px;
}

#AttachmentUploadForm #progress_bar {
  margin-top: -52px;
  margin-right: 9px;
}

.ProgressWrapperBox {
  position: relative;
  width: 400px;
  display: block !important;
}

.ProgressWrapperBox .progress-hidden {
  display: none;
}

.ProgressWrapperBox #loadingContainer {
  position: absolute;
  width: 100%;
  bottom: 20px;
}

.ProgressWrapperBox img {
  width: 60%;
  margin: 0 auto;
  display: block;
}

.page-body .MessageShareIdeasFormBox #s3form, .studentbehaviors #s3form, .EportfolioAddBox #s3form {
  padding-bottom: 0;
  width: 100%;
  background: transparent;
}

.EportfolioAddBox #s3form {
  background: transparent;
}

.EportfolioAddBox .absolute_form_side_panel {
  bottom: 5%;
}

@media screen and (max-width: 500px) {
  .ProgressWrapperBox #loadingContainer, .ProgressWrapperBox, .ezdz-dropzone {
    width: 100%;
  }

  .MessageShareIdeasFormBox .absolute_form_side_panel, .studentbehaviors .absolute_form_side_panel, .EportfolioAddBox .absolute_form_side_panel {
    width: 100%;
    right: 0% !important;
  }
}
@media screen and (max-width: 600px) {
  #import_financial_claimsForm .ezdz-dropzone {
    width: 100%;
  }
}
#AssessmentItemsRangesForm .minicolors-theme-bootstrap .minicolors-swatch, #AssessmentAssessmentRangesForm .minicolors-theme-bootstrap .minicolors-swatch {
  right: auto;
  left: 11px;
  top: 9px;
}

.actions .open > .dropdown-menu {
  transform: translateX(18px) translateY(-13px);
  max-width: 170px;
}

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

.form-group.search-sidemenu {
  position: relative;
  display: flex;
  width: 100%;
}

.form-group.search-sidemenu i {
  position: absolute;
  top: 9px;
  left: 18px;
  font-size: 1.2em;
  color: var(--main-color);
  pointer-events: none;
}

.form-group.search-sidemenu input {
  padding-right: 40px !important;
}

#students_scores_length {
  margin-bottom: 20px;
}

#students_scores_length select {
  width: 200px !important;
  margin: 0 10px;
}

.comment-text p {
  word-break: break-word;
}

.datePickerWrapper {
  position: relative;
}

.clearDatepicker {
  position: absolute;
  left: 20px;
  color: #a0a0a0;
  top: 13px;
}

#reactions_element #block_context_menu {
  left: 0px;
  top: 40px;
  z-index: 11;
  padding: 0;
  display: none;
  position: absolute;
  padding: 10px;
  list-style: none;
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 5px #999;
  -webkit-box-shadow: 0 0 5px #999;
  box-shadow: 0 0 5px #999;
}

#reactions_element #block_context_menu a {
  height: auto;
  text-decoration: none;
  color: var(--main-color);
  padding: 10px;
  border-bottom: solid 1px #ccc;
  border: none;
  text-align: center !important;
  display: block;
}

#reactions_element #block_context_menu a:hover {
  background: var(--main-color);
  color: #fff;
}

.filterLabel {
  font-size: 16px;
  margin-right: 15px;
}

.developerFilterBox {
  display: inline-block;
  margin-right: 20px;
}

.filter-menu .btn.active.left:before {
  animation: moveArrowFromLeftSlowly 1s;
}

.filter-menu .btn.active.right:before {
  animation: moveArrowFromRightSlowly 1s;
}

@keyframes moveArrowFromLeftSlowly {
  0% {
    left: 0;
  }
  100% {
    left: 50%;
  }
}
@keyframes moveArrowFromRightSlowly {
  0% {
    left: 100%;
  }
  100% {
    left: 50%;
  }
}
#visits_by_role_chart, #stats_chart {
  direction: ltr !important;
}

#visits_by_role_chart {
  transform: scale(0.9);
}

#announcements .pagination li.disabled a {
  pointer-events: none;
}

.icon_type {
  font-size: 33px;
}

.navbar li .notification-time {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 11px;
  font-weight: 400;
  color: #519ce2;
}

.notification .message-info .notification-time {
  display: inline-block;
}

.notification .message-info .notification-time {
  font-size: 0.8em;
  color: #666;
}

.navbar li .notification_type, .navbar li.notification-with-avatar .avatar {
  max-width: 30px;
  margin-left: 6px;
  margin-top: 13px;
  vertical-align: top;
  font-size: 31px;
  display: inline-block;
  color: var(--main-color);
  border-radius: 3px;
  max-height: 30px;
}

.navbar li.notification-with-avatar {
  position: relative;
}

.navbar li.notification-with-avatar .notification_type {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 5em;
  margin: 0;
  max-width: 100%;
  opacity: 0.2;
}

.navbar li .notification-subject {
  margin: 7px 0 4px;
  display: block;
  white-space: pre-line;
  word-break: break-word;
  font-size: 13px;
  color: #555;
}

.navbar .notification_Scroll {
  width: 300px;
  padding-top: 10px;
  overflow-y: auto;
  max-height: 300px;
  padding-bottom: 32px;
}

.notification_Scroll li.seen {
  opacity: 0.5;
}

.navbar .dropdown-menu li {
  background-color: #ffffff;
  border: 0;
  padding: 0 8px;
  overflow: hidden;
  min-height: 70px;
}

.navbar .dropdown-menu li.show-all, .navbar .dropdown-menu li.dropdown-footer {
  min-height: auto !important;
}

.notifaction-body {
  color: #777;
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar li .notification {
  display: inline-block;
  position: relative;
  width: 208px;
  margin-right: 5px;
  padding-bottom: 15px;
  min-height: 60px;
}

.notification_count {
  border-radius: 10px;
  border: 1px solid red;
  width: 20px;
  text-align: center;
}

@media only screen and (max-width: 500px) {
  .navbar .notification_Scroll {
    width: 287px;
    padding-top: 10px;
    overflow-y: auto;
    max-height: 300px;
    right: -146px;
    left: auto;
  }
}
.navbar .no_result {
  height: 50px;
  text-align: center;
  color: #444;
  font-size: 15px;
  margin-top: 10px;
}

.lala-alert p {
  display: block;
  position: relative;
  margin-right: 35px;
}

.notification_icon_popup {
  position: relative;
  color: var(--main-color) !important;
  font-size: 34px;
  top: -12px;
  right: 2px;
  opacity: 1 !important;
}

.notification_time {
  position: absolute;
  color: #666 !important;
  font-size: 12px;
  opacity: 0.5 !important;
  display: block;
  bottom: -20px;
  right: 10px;
}

.lala-alert img, .notification_icon_popup {
  height: 30px;
  width: 30px;
  margin-right: 5px;
  border-radius: 3px;
  float: right;
  margin-bottom: 100px;
}

.lala-alert {
  position: relative;
  padding: 25px 30px 20px 50px;
  height: 70px;
  overflow: hidden;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
}

.lala-alert .link-popup {
  position: absolute;
  width: 290px !important;
  display: block;
  height: 57px;
  margin-top: -15px;
  text-decoration: none !important;
  margin-right: -50px;
  color: #666 !important;
}

.lala-alert .title-popup {
  position: relative;
  line-height: 15px;
  font-size: 14px;
  max-width: 90%;
  display: block;
  padding: 0 10px 3px;
}

.lala-alert .desc-popup {
  max-width: 100%;
  font-size: 12px;
  display: block;
  padding: 0 10px;
  margin-top: -2px;
  color: #555;
  word-break: keep-all;
}

.lala-alert .avatar {
  width: 30px;
  height: 30px;
  object-fit: cover;
  -o-object-fit: cover;
}

.child-avatar-notif {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 3px 0 0;
  float: left;
}

.browse-content--wrapper:not(.browse-content--wrapper-pk) #browseContent {
  padding: 15px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  margin-top: 10px;
}
.browse-content--wrapper .eportfolio_section {
  display: none !important;
}
.browse-content--wrapper .loading-image {
  display: block;
  margin: auto;
}
.browse-content--wrapper .preparations_wrapper {
  width: 20%;
}
.browse-content--wrapper .content_wrapper, .browse-content--wrapper #addNewPreparation {
  width: 80%;
}
@media only screen and (max-width: 1576px) {
  .browse-content--wrapper .preparations_wrapper {
    min-width: 30%;
  }
  .browse-content--wrapper .content_wrapper, .browse-content--wrapper #addNewPreparation {
    max-width: 70%;
  }
}
@media only screen and (max-width: 1109px) {
  .browse-content--wrapper .preparations_wrapper {
    width: 100%;
  }
  .browse-content--wrapper .content_wrapper, .browse-content--wrapper #addNewPreparation {
    width: 100%;
    max-width: unset;
  }
}
.browse-content--wrapper .preparations {
  background-color: #fff;
  position: relative;
  border-radius: 5px;
  border: 1px solid #eee;
}
.browse-content--wrapper .preparations__filter input {
  width: calc(100% - 30px) !important;
  margin: 10px auto;
  min-height: 35px;
}
.browse-content--wrapper .preparations__filter input:hover {
  border-style: dashed !important;
}
.browse-content--wrapper .preparations .hide_show_prepartions_btn {
  display: none;
  color: var(--main-color) !important;
}
.browse-content--wrapper .preparations .hide_show_prepartions_btn i {
  margin-left: 10px;
  font-size: 20px;
  vertical-align: middle;
  display: inline-block;
}
@media only screen and (max-width: 1109px) {
  .browse-content--wrapper .preparations .hide_show_prepartions_btn {
    display: block;
  }
  .browse-content--wrapper .preparations .preparations_menu {
    height: 50px;
    overflow-y: hidden;
  }
  .browse-content--wrapper .preparations .preparations_menu.showAllPrepretions {
    height: auto;
  }
  .browse-content--wrapper .preparations .preparations_menu.showAllPrepretions .show_all_preprations {
    display: none;
  }
}
.browse-content--wrapper .preparations .preparation {
  padding: 15px 25px;
  /*border-bottom: 1px solid $primary;*/
  cursor: pointer;
  position: relative;
  font-size: 14px;
  text-transform: capitalize;
  transition: 0.3s ease-in-out;
  color: #535261;
}
.browse-content--wrapper .preparations .preparation:not(.preparation--import):hover {
  background-color: #fafafa;
}
.browse-content--wrapper .preparations .preparation:last-child {
  border-bottom: 0;
}
.browse-content--wrapper .preparations .preparation.active {
  background-color: var(--main-color);
  color: #fff;
}
.browse-content--wrapper .preparations .preparation.active:hover {
  color: #535261;
}
.browse-content--wrapper .preparations .preparation--add {
  border-bottom: 0;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  color: #535261;
  border-radius: 4px;
}
.browse-content--wrapper .preparations .preparation--add .fa {
  color: var(--main-color);
  margin-left: 6px;
}
.browse-content--wrapper .preparations .preparation.loading {
  pointer-events: none;
}
.browse-content--wrapper .preparations .preparation.loading:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(204, 204, 204, 0.5) url(/img/classera_loading.gif) no-repeat center center;
  background-size: contain;
}
.browse-content--wrapper .preparations .preparation.preparation--import .btn {
  border-radius: 25px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
  margin-bottom: 30px;
  width: 100%;
}
.browse-content--wrapper .preparations .dragover {
  border: 1px dashed var(--main-color);
}
.browse-content--wrapper .preparations .notAllowedDraggable .dragover {
  border-color: transparent !important;
}
.browse-content--wrapper .content .widget {
  border: 1px solid #eee;
  background: #fff;
  border-radius: 5px;
  box-shadow: unset;
  /*border-bottom: 4px solid $browse_content_black;*/
}
@media screen and (max-width: 1570px) and (min-width: 1200px) {
  .browse-content--wrapper .content .widget .searchedItem {
    width: 50%;
  }
}
.browse-content--wrapper .content .widget__total {
  padding: 0 30px 20px;
  margin-top: 0;
  display: block;
  font-size: 17px;
  color: #999;
  padding-right: 70px;
  position: relative;
}
@media only screen and (max-width: 439px) {
  .browse-content--wrapper .content .widget__total {
    font-size: 14px;
    padding-right: 50px;
  }
}
.browse-content--wrapper .content .widget__total:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #535261;
  right: 25px;
  opacity: 0.3;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}
@media only screen and (max-width: 439px) {
  .browse-content--wrapper .content .widget__total:before {
    right: 10px;
  }
}
.browse-content--wrapper .content .widget__total:after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #535261;
  right: 38px;
  opacity: 0.3;
  top: 20%;
  transform: translateY(-50%);
  position: absolute;
}
@media only screen and (max-width: 439px) {
  .browse-content--wrapper .content .widget__total:after {
    right: 20px;
  }
}
.browse-content--wrapper .content .widget__title {
  margin: 0 0 30px !important;
  padding: 15px 30px;
  font-size: 30px !important;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  color: #535261;
  position: relative;
}
@media only screen and (max-width: 759px) {
  .browse-content--wrapper .content .widget__title {
    font-size: 18px !important;
    padding: 10px 7px;
    padding-right: 12px;
  }
}
@media only screen and (max-width: 439px) {
  .browse-content--wrapper .content .widget__title {
    font-size: 16px !important;
  }
}
.browse-content--wrapper .content .widget__title .floated {
  float: left;
  font-size: 16px;
  display: flex;
  padding-top: 5px;
}
@media only screen and (max-width: 700px) {
  .browse-content--wrapper .content .widget__title .floated {
    padding-top: 0;
    margin-top: -3px;
    font-size: 14px;
  }
}
@media only screen and (max-width: 450px) {
  .browse-content--wrapper .content .widget__title .floated {
    float: initial;
    margin-top: 3px;
  }
}
.browse-content--wrapper .content .widget__title .floated.one-section, .browse-content--wrapper .content .widget__title .floated.eportfolio_floated {
  justify-content: flex-end;
}
.browse-content--wrapper .content .widget__title .floated .fa-caret-up {
  margin: 0 10px;
  font-size: 21px;
}
@media only screen and (max-width: 450px) {
  .browse-content--wrapper .content .widget__title .floated .fa-caret-up {
    margin: 0 auto;
  }
}
.browse-content--wrapper .content .widget__title:before {
  content: "";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 28px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  margin-left: 10px;
  color: #535261 !important;
}
@media only screen and (max-width: 759px) {
  .browse-content--wrapper .content .widget__title:before {
    font-size: 20px;
  }
}
.browse-content--wrapper .content .widget__body .item {
  padding: 15px;
  border: 1px solid #eee;
  border-top: 4px solid #8cc474;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 4px;
  position: relative;
  border-top-color: #535261 !important;
}
.browse-content--wrapper .content .widget__body .item.with_percentage {
  border-top-color: #eee !important;
}
.browse-content--wrapper .content .widget__body .item .mark {
  position: absolute;
  right: 10px;
  top: 0px;
  width: 50px;
  height: 70px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #7d2988;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  font-size: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.browse-content--wrapper .content .widget__body .item__image img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 7px;
}
.browse-content--wrapper .content .widget__body .item__image img[src*=".svg"] {
  /*background: #eaeaea;*/
  object-fit: contain;
}
.browse-content--wrapper .content .widget__body .item__title {
  min-height: 70px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.browse-content--wrapper .content .widget__body .item__title a {
  color: #535261;
  word-break: break-word;
  width: 100%;
  white-space: break-spaces;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 68px;
}
.browse-content--wrapper .content .widget__body .item__title a span {
  font-size: 16px;
}
.browse-content--wrapper .content .widget__body .item__details {
  border-top: 1px solid #eee;
  padding: 15px;
  margin: 0 -15px -15px;
}
.browse-content--wrapper .content .widget__body .item__details .flex-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.browse-content--wrapper .content .widget__body .item__details .flex-wrapper .fa {
  text-align: right;
  color: #ccc;
  font-size: 20px;
  flex-basis: 50%;
}
.browse-content--wrapper .content .widget__body .item__details .flex-wrapper .fa.seen {
  color: #66BB6A;
}
.browse-content--wrapper .content .widget__body .item__details .flex-wrapper .publish-date {
  text-align: left;
  flex-basis: 50%;
  color: #66BB6A;
}
.browse-content--wrapper .content .widget__body .item__details .flex-wrapper .publish-date.not-published {
  color: #aeaeae;
}
.browse-content--wrapper .content .widget__body .item__details .rate-box {
  margin: 15px 0;
}
.browse-content--wrapper .content .widget__body .item__details .rate-box .fa-star {
  color: #ccc;
}
.browse-content--wrapper .content .widget__body .item__details .rate-box .fa-star.star--yellow {
  color: #fdd835;
}
.browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_1 span:nth-child(1), .browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_2 span:nth-child(1), .browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_3 span:nth-child(1), .browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_4 span:nth-child(1), .browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_5 span:nth-child(1) {
  color: #fdd835;
}
.browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_2 span:nth-child(2), .browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_3 span:nth-child(2), .browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_4 span:nth-child(2), .browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_5 span:nth-child(2) {
  color: #fdd835;
}
.browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_3 span:nth-child(3), .browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_4 span:nth-child(3), .browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_5 span:nth-child(3) {
  color: #fdd835;
}
.browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_4 span:nth-child(4), .browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_5 span:nth-child(4) {
  color: #fdd835;
}
.browse-content--wrapper .content .widget__body .item__details .rate-box.rate_val_5 span:nth-child(5) {
  color: #fdd835;
}
.browse-content--wrapper .content .widget__body .item__menu {
  position: absolute;
  top: 15px;
  left: 15px;
}
.browse-content--wrapper .content .widget__body .item__menu > .dropdown-toggle {
  cursor: pointer;
  transform: rotate(270deg);
  display: inline-block;
  font-size: 20px;
  color: #ccc;
}
.browse-content--wrapper .content .widget__body .item__menu > .dropdown-toggle i {
  color: #ccc;
}
.browse-content--wrapper .content .widget__body .item__menu .dropdown-menu li > a {
  font-size: 20px;
}
.browse-content--wrapper .content .widget__body .item__read-percent {
  height: 4px;
  position: absolute;
  right: 0;
  top: -4px;
  background-color: #535261 !important;
}
.browse-content--wrapper .content .widget__body .item__read-percent:before {
  content: attr(data-read-percent);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: #fff;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.5s linear;
  justify-content: center;
  padding: 5px;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  right: 0;
  top: -24px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: #535261 !important;
}
.browse-content--wrapper .content .widget__body .item__read-percent:hover:before {
  content: attr(data-read-percent-with-label);
  width: 165px;
}
.browse-content--wrapper .content .widget__body .item__read-percent.background--red {
  background-color: #f8d7da;
}
.browse-content--wrapper .content .widget__body .item__read-percent.background--red:before {
  background-color: #721c24;
}
.browse-content--wrapper .content .widget__body .item__read-percent.background--green {
  background-color: #d4edda;
}
.browse-content--wrapper .content .widget__body .item__read-percent.background--green:before {
  background-color: #155724;
}
.browse-content--wrapper .content .widget__body .item--not-published {
  background-color: #fafafa;
}
.browse-content--wrapper .content .widget__body .item.weekly_plan_comments h3, .browse-content--wrapper .content .widget__body .item.actions-and-assessment h3, .browse-content--wrapper .content .widget__body .item.notice-message h3 {
  margin-top: 0;
}
.browse-content--wrapper .content .widget__body .item .dropdown-menu {
  left: 0;
  right: auto;
}
.browse-content--wrapper .content .widget__body .no-results h3 {
  margin: 0 0 30px;
}
.browse-content--wrapper .content .widget .widget__link {
  position: relative;
  padding-top: 27px;
  flex: 1;
  width: 120px;
}
@media only screen and (max-width: 450px) {
  .browse-content--wrapper .content .widget .widget__link {
    width: 70px;
  }
}
.browse-content--wrapper .content .widget .widget__link > a {
  display: block;
  padding: 6px 24px;
  color: #fff;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 25px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 450px) {
  .browse-content--wrapper .content .widget .widget__link > a {
    padding: 3px 6px;
    width: max-content;
  }
}
.browse-content--wrapper .content .widget .widget__link > a:before {
  content: "";
  margin-left: 10px;
  font-size: 16px;
  color: white;
  font-family: FontAwesome;
}
.browse-content--wrapper .content .widget .widget__link.add > a:before {
  content: "\f055";
}
.browse-content--wrapper .content .widget .widget__link.edit > a {
  background-color: #004d40;
}
.browse-content--wrapper .content .widget .widget__link.edit > a:before {
  content: "\f14b";
}
.browse-content--wrapper .content .widget:nth-child(2) .widget__body {
  padding: 15px;
}
.browse-content--wrapper .content .widget.collapsed .widget__title .fa-caret-up {
  /*color: $browse_content_black;*/
}
.browse-content--wrapper .content .widget.collapsed .widget__title .fa-caret-up:before {
  content: "\f0d7" !important;
}
.browse-content--wrapper .content .widget.collapsed .widget__body {
  height: 0;
  overflow: hidden;
}
.browse-content--wrapper .content .widget.video-lectures .widget__title:before {
  content: "\f01d";
  color: #BA8641;
}
.browse-content--wrapper .content .widget.video-lectures .widget__body .item {
  border-top-color: #BA8641;
}
.browse-content--wrapper .content .widget.video-lectures .widget__link > a {
  background: #BA8641;
}
.browse-content--wrapper .content .widget.course-material .widget__title:before {
  content: "\f0f2";
  color: #8BC34A;
}
.browse-content--wrapper .content .widget.course-material .widget__body .item {
  border-top-color: #8BC34A;
}
.browse-content--wrapper .content .widget.course-material .widget__link > a {
  background: #8BC34A;
}
.browse-content--wrapper .content .widget.discussion-rooms .widget__title:before {
  content: "\f0c0";
  color: #ff4c08;
}
.browse-content--wrapper .content .widget.discussion-rooms .widget__body .item {
  border-top-color: #ff4c08;
}
.browse-content--wrapper .content .widget.discussion-rooms .widget__link > a {
  background: #ff4c08;
}
.browse-content--wrapper .content .widget.smart-classroom .widget__title:before {
  content: "\f108";
  color: #e41269;
}
.browse-content--wrapper .content .widget.smart-classroom .widget__body .item {
  border-top-color: #e41269;
}
.browse-content--wrapper .content .widget.smart-classroom .widget__link > a {
  background: #e41269;
}
.browse-content--wrapper .content .widget.assignments .widget__title:before {
  content: "\f14b";
  color: #21B9D0;
}
.browse-content--wrapper .content .widget.assignments .widget__body .item {
  border-top-color: #21B9D0;
}
.browse-content--wrapper .content .widget.assignments .widget__link > a {
  background: #21B9D0;
}
.browse-content--wrapper .content .widget.exams .widget__title:before {
  content: "\f059";
  color: #7D2989;
}
.browse-content--wrapper .content .widget.exams .widget__body .item {
  border-top-color: #7D2989;
}
.browse-content--wrapper .content .widget.exams .widget__link > a {
  background: #7D2989;
}
.browse-content--wrapper .content .widget.additional-libraries .widget__title:before {
  content: "\f0eb";
  color: #4CAF50;
}
.browse-content--wrapper .content .widget.additional-libraries .widget__body .item {
  border-top-color: #4CAF50;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list {
  padding: 0;
  display: flex;
  justify-content: flex-end;
  width: 35px;
  overflow-x: hidden;
  transition: all 0.5s ease-in-out;
  flex-direction: row;
  position: absolute;
  left: 70px;
  margin: 8px 0 0;
  top: 10px;
  height: 38px;
}
@media screen and (max-width: 750px) {
  .browse-content--wrapper .content .widget.additional-libraries .upload-list {
    transition: unset;
    top: 0;
    left: 45px;
  }
}
@media only screen and (max-width: 450px) {
  .browse-content--wrapper .content .widget.additional-libraries .upload-list {
    left: 5px;
  }
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin: 0 3px;
  font-size: 0;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  position: relative;
  color: white;
  padding: 15px;
  box-shadow: none;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a .fa {
  color: white !important;
  font-size: 20px;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a:before {
  content: none;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.content-Bshows {
  background: #79060f;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.content-BVideo {
  background: #e91e63;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.content-Bdocument {
  background: #ffc107;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.content-Scorm {
  background: #4caf50;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.content-Bflash {
  background: #3f51b5;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.content-Bmp3 {
  background: #9c27b0;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.content-Bpgm {
  background: #673ab7;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.content-Bgame {
  background: #f44336;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.content-Bweb {
  background: #2196f3;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.content-Bphoto {
  background: #009688;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a:last-child {
  display: inline-flex;
  background: #4caf50;
  color: white;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.active {
  font-size: 16px;
  width: auto;
  border-radius: 5px;
  min-width: 230px;
}
@media screen and (max-width: 700px) {
  .browse-content--wrapper .content .widget.additional-libraries .upload-list a.active {
    font-size: 13px;
  }
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list a.active i.fa {
  margin-left: 20px;
}
.browse-content--wrapper .content .widget.additional-libraries .upload-list.active {
  width: calc(100% - 70px);
  z-index: 111;
  height: auto;
  background: #fff;
}
@media screen and (max-width: 1390px) {
  .browse-content--wrapper .content .widget.additional-libraries .upload-list.active {
    flex-wrap: wrap-reverse;
  }
}
@media screen and (max-width: 700px) {
  .browse-content--wrapper .content .widget.additional-libraries .upload-list.active {
    /*position: absolute;*/
    left: 0;
    background: #fff;
    padding-top: 8px;
    margin: 0;
    top: 0;
  }
}
.browse-content--wrapper .content .widget.content__filter {
  padding: 30px;
}
.browse-content--wrapper .content .widget.content__filter .serachResultGuide {
  padding: 10px 10px 0;
  font-size: 14px;
}
.browse-content--wrapper .content .widget.content__filter .serachResultGuide span {
  color: #fff;
  background: var(--main-color);
  padding: 5px 10px;
  border-radius: 25px;
  display: inline-block;
  margin: 2px;
  cursor: pointer;
}
.browse-content--wrapper .content .widget.content__filter .serachResultGuide i {
  font-weight: bold;
  font-style: normal;
  font-size: 14px;
  background: #fff;
  width: 24px;
  height: 24px;
  display: inline-block;
  border-radius: 25px;
  color: #e5301c;
  text-align: center;
  padding-top: 1px;
}
.browse-content--wrapper .discussion_rooms_section .rate-box, .browse-content--wrapper .smart_classroom_section .rate-box {
  opacity: 0;
}
.browse-content--wrapper .pk_browse_content .content {
  background: #fff;
  border-radius: 10px;
}
.browse-content--wrapper .pk_browse_content .content .widget {
  border: 0;
  display: none;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow {
  display: block;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow .widget__body {
  padding: 20px 10px;
  display: block;
  height: auto;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow .widget__body .item {
  border: 0 !important;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow .widget__body .item__image {
  order: 0;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow .widget__body .item__image img {
  width: 100%;
  height: 300px;
  border-radius: 25px;
  border: 1px solid #eee;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow .widget__body .item__title {
  order: 2;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow .widget__body .item__title h3 {
  margin: 5px 0;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow .widget__body .item__title a {
  text-align: right;
  padding: 7px;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow .widget__body .item__title a i {
  font-size: 18px;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow .widget__body .item__details {
  order: 1;
  margin: 0;
  display: flex;
  justify-content: space-between;
  border: 0;
  padding: 10px 10px 0;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow .widget__body .item__details .publish-date {
  min-width: 75px;
}
.browse-content--wrapper .pk_browse_content .content .widget.selectedNow .widget__body .item__details .rate-box {
  margin: 0;
}
.browse-content--wrapper .pk_browse_content .content .widget__title::before, .browse-content--wrapper .pk_browse_content .content .widget__title i {
  display: none;
}
.browse-content--wrapper .pk_browse_content .widgets-tabs {
  padding: 10px 15px;
}
.browse-content--wrapper .pk_browse_content .widgets-tabs button {
  border-radius: 25px;
  padding: 10px 20px;
  margin: 4px;
  box-shadow: unset;
}
.browse-content--wrapper .pk_browse_content .widgets-tabs button span {
  margin-right: 20px;
}
.browse-content--wrapper .pk_browse_content .widgets-tabs button.active {
  color: #fff;
  background: var(--main-color);
  border-color: var(--main-color);
}
.browse-content--wrapper .pk_browse_content .content__filter {
  display: none;
}
.browse-content--wrapper .pk_browse_content .content .widget__body .item__read-percent {
  right: 0;
  left: unset;
  top: 0;
  background-color: transparent;
  width: unset !important;
}
.browse-content--wrapper .pk_browse_content .content .widget__body .item__read-percent:before {
  top: 25px !important;
  right: 0;
  left: unset;
}
.browse-content--wrapper .pk_browse_content .content .widget__body .item__title a {
  height: 58px;
}
.browse-content--wrapper .pk_browse_content .content .widget__body .item__details .content-icon {
  display: none;
}
.browse-content--wrapper .pk_browse_content .content .widget__body .item__details .publish-date {
  text-align: right;
}
.browse-content--wrapper .pk_browse_content.not-allowed-to-edit-content .content .widget__title {
  display: none;
}
.browse-content--wrapper .browse-content > .row {
  margin: 0 -10px;
}
.browse-content--wrapper .courses_list select {
  border-radius: 7px;
}
.browse-content--wrapper .courses_list .select {
  padding: 0;
}
.browse-content--wrapper .courses_list .select-styled {
  border-radius: 8px;
}
.browse-content--wrapper.browse-content--wrapper-pk .browse-content--wrapper .preparations {
  border-radius: 10px;
}

#addNewPreparation {
  display: none;
  position: absolute;
  left: 0;
  top: 64px;
  /*width: 78.333333%;*/
}
@media screen and (max-width: 700px) {
  #addNewPreparation {
    width: 100%;
  }
}
#addNewPreparation.active {
  display: block;
}

#modalcopyattachment .add_smart_classroom_next_page,
#modalcopyexam .add_smart_classroom_next_page,
#view_attachment .add_smart_classroom_next_page,
#add_discussion_room .add_smart_classroom_next_page,
#add_smart_classroom .add_smart_classroom_next_page {
  display: none !important;
}
#modalcopyattachment .modal-body,
#modalcopyexam .modal-body,
#view_attachment .modal-body,
#add_discussion_room .modal-body,
#add_smart_classroom .modal-body {
  max-height: 70vh;
  overflow-y: scroll;
}
#modalcopyattachment .modal-body .well,
#modalcopyexam .modal-body .well,
#view_attachment .modal-body .well,
#add_discussion_room .modal-body .well,
#add_smart_classroom .modal-body .well {
  max-width: 1000px;
}
#modalcopyattachment .modal-body .well #sections_select_all,
#modalcopyexam .modal-body .well #sections_select_all,
#view_attachment .modal-body .well #sections_select_all,
#add_discussion_room .modal-body .well #sections_select_all,
#add_smart_classroom .modal-body .well #sections_select_all {
  margin-left: 20px;
  margin-right: 20px;
}
#modalcopyattachment .modal-body img.loading,
#modalcopyexam .modal-body img.loading,
#view_attachment .modal-body img.loading,
#add_discussion_room .modal-body img.loading,
#add_smart_classroom .modal-body img.loading {
  display: block;
  margin: 10px auto;
}
#modalcopyattachment .modal-body #student_list,
#modalcopyexam .modal-body #student_list,
#view_attachment .modal-body #student_list,
#add_discussion_room .modal-body #student_list,
#add_smart_classroom .modal-body #student_list {
  display: none;
}
#modalcopyattachment .copy_attachment,
#modalcopyexam .copy_attachment,
#view_attachment .copy_attachment,
#add_discussion_room .copy_attachment,
#add_smart_classroom .copy_attachment {
  font-size: 12px;
}
#modalcopyattachment .delete-btn,
#modalcopyattachment .no-delete-btn,
#modalcopyexam .delete-btn,
#modalcopyexam .no-delete-btn,
#view_attachment .delete-btn,
#view_attachment .no-delete-btn,
#add_discussion_room .delete-btn,
#add_discussion_room .no-delete-btn,
#add_smart_classroom .delete-btn,
#add_smart_classroom .no-delete-btn {
  display: none;
}
#modalcopyattachment #sections_list #sections_select_all,
#modalcopyexam #sections_list #sections_select_all,
#view_attachment #sections_list #sections_select_all,
#add_discussion_room #sections_list #sections_select_all,
#add_smart_classroom #sections_list #sections_select_all {
  margin: 0 !important;
}
#modalcopyattachment ul.video-type li i,
#modalcopyexam ul.video-type li i,
#view_attachment ul.video-type li i,
#add_discussion_room ul.video-type li i,
#add_smart_classroom ul.video-type li i {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#upload_attachment .modal-body #student_list {
  display: block;
}

#view_attachment.modal #insertCommentForm fieldset {
  width: 100%;
}

.browse-content-modal {
  z-index: 1111111111;
  background: rgba(0, 0, 0, 0.25);
}
.browse-content-modal form {
  width: 100%;
}
.browse-content-modal .modal-content {
  border-radius: 25px;
}

#addNewPreparation .tree_container {
  max-width: 100%;
}

#view_attachment.modal .modal-dialog {
  width: 80%;
  min-width: 300px;
  max-width: 100%;
}

.browse-content--wrapper .preparations_menu {
  list-style-type: none;
  padding: 0 6px;
  margin: 0;
  border-radius: 8px;
}
.browse-content--wrapper .preparations_menu .preparation {
  padding: 15px 25px;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  text-transform: capitalize;
  transition: 0.3sease-in-out;
  color: #535261;
  height: 50px;
  background-color: #fff;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
  padding: 10px;
  margin: 10px 0;
  cursor: pointer;
  border-radius: 8px;
  transition: box-shadow 0.3sease;
  padding: 10px 15px;
  height: auto;
}
.browse-content--wrapper .preparations_menu .preparation:hover {
  background-color: #f1f1f1;
  box-shadow: 0px 0px 8px rgba(81, 221, 247, 0.6);
}
.browse-content--wrapper .preparations_menu .preparation.active {
  border: 1px solid rgba(81, 221, 247, 0.6);
  box-shadow: 0px 0px 8px rgba(81, 221, 247, 0.6);
  background-color: transparent;
  color: inherit;
}
.browse-content--wrapper .preparations.list-unstyled > .preparation:not(.preparation--import):not(.preparation--add) {
  background-color: var(--main-color);
  color: #fff;
}
.browse-content--wrapper .preparations.list-unstyled > .preparation:not(.preparation--import):not(.preparation--add):hover {
  background-color: #fafafa;
  color: #000;
}
.browse-content--wrapper .hide_show_preprations_btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}
.browse-content--wrapper .hide_show_preprations_btn:hover {
  background-color: #2980b9;
}
.browse-content--wrapper .hide_show_preprations_btn i {
  margin-left: 10px;
}
.browse-content--wrapper .progress_percentage {
  font-size: 10px;
  color: #CCC;
}
.browse-content--wrapper .progress_bar {
  width: 100%;
  background-color: #e0e0e0;
  height: 6px;
  border-radius: 5px;
  margin-top: 5px;
}
.browse-content--wrapper .progress_bar .progress {
  height: 100%;
  border-radius: 5px;
  background-color: #76c7c0;
}

.tiled-library-container {
  padding: 16px 0;
  padding-right: 365px;
}

.side-filter {
  width: 30%;
  max-width: 365px;
  padding: 26px 26px 100px;
  height: 100%;
  background: #f5f5f5;
  position: absolute;
  top: 0;
  right: 0;
}

.input-wrapper {
  margin: 10px 0;
}

.input-wrapper .btn {
  width: 100%;
}

.input-wrapper input[type=checkbox] {
  position: static;
  display: inline-block;
}

.main-content {
  overflow: hidden;
}

.loader {
  background: url(../../img/classera_loading.gif) no-repeat;
  width: 100px;
  height: 100px;
  margin: 16px auto;
}

.tile-block {
  position: relative;
  margin: 0.5%;
  width: 32.2%;
  height: 258px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  display: block;
}

.library-tiles .tile-block {
  display: inline;
}

.tile-block img.cover-img {
  position: absolute;
  object-fit: cover;
  -o-object-fit: cover;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 1;
}

.tile-block i {
  font-style: normal;
}

.tile-block .upper,
.tile-block .lower {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  color: #FFF;
  width: 100%;
}

.tile-block .upper {
  font-size: 1.3em;
}

.tile-block .upper span,
.tile-block .lower span {
  display: block;
  margin: 0 0 3px;
}

.tile-block .lower span.activityOfficer {
  font-size: 13px;
}

.tile-block .lower {
  top: auto;
  bottom: 0;
  opacity: 0.8;
}

.tile-block .date {
  left: 15px;
  position: absolute;
  bottom: 15px;
}

.tile-block .date:before {
  content: "";
  display: inline-block;
  background: url(../../img/digital-library-spritesheet.png) no-repeat;
  width: 12px;
  height: 12px;
  background-position: -5px -144px;
  top: 1px;
  margin: 0 4px;
  position: relative;
}

.tile-block .likes:before {
  content: "";
  display: inline-block;
  background: url(../../img/digital-library-spritesheet.png) no-repeat;
  width: 15px;
  height: 13px;
  background-position: -5px -395px;
  top: 1px;
  margin: 0 4px;
  position: relative;
}

.tile-block:before {
  content: "";
  display: block;
  background: url(../../img/digital-library-spritesheet.png) no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
}

.tile-block.BVideo,
.tile-block.Video {
  background-color: #FF5722;
}

.tile-block.BVideo:before,
.tile-block.Video:before {
  width: 161px;
  height: 161px;
  background-position: -5px -418px;
  zoom: 0.5;
}

.tile-block.Bdocument,
.tile-block.Material,
.tile-block.Scorm {
  background-color: #ec1b65;
}

.tile-block.Bdocument:before,
.tile-block.Material:before,
.tile-block.Scorm:before {
  width: 100px;
  height: 100px;
  background-position: -5px -166px;
}

.tile-block.Bflash,
.tile-block.Bgame {
  background-color: #6c39ae;
}

.tile-block.Bflash:before,
.tile-block.Bgame:before {
  width: 110px;
  height: 60px;
  background-position: -5px -325px;
}

.tile-block.Bmp3 {
  background-color: #9f26a9;
}

.tile-block.Bmp3:before {
  width: 94px;
  height: 129px;
  background-position: -5px -5px;
}

.tile-block.Bpgm {
  background-color: #484fab;
}

.tile-block.Bpgm:before {
  width: 59px;
  height: 71px;
  background-position: -5px -835px;
}

.tile-block.Bshows {
  background-color: #3a8ce0;
}

.tile-block.Bshows:before {
  width: 193px;
  height: 159px;
  background-position: -5px -589px;
}

.tile-block.Bweb {
  background-color: #f44339;
}

.tile-block.Bweb:before {
  width: 117px;
  height: 71px;
  background-position: -80px -835px;
}

.tile-block.BVideo:after,
.tile-block.Video:after,
.tile-block.Bphoto:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.tiles-row:nth-child(odd) .tile-block {
  float: right;
}

.tiles-row:nth-child(even) .tile-block {
  float: left;
}

.tiles-row .tile-block:nth-child(1) {
  width: 32.2%;
  height: 520px;
}

.tiles-row .tile-block:nth-child(4) {
  width: 65.5%;
  height: 254px;
}

.tile-block .back-cover {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background: #1a8a79;
  z-index: 10;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.2s ease;
}

.tile-block .back-cover img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  -o-object-fit: cover;
  border-radius: 50%;
  margin: 16px auto;
  display: block;
}

.tile-block .back-cover span {
  display: block;
  color: #FFF;
  text-align: center;
}

.tile-block .back-cover i {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100px;
  height: 100px;
  background: #FFF;
  color: #666;
  border-radius: 50%;
  transition: all 0.2s ease;
  transform: translateX(50%) translateY(-50%);
}

.tile-block .back-cover i:hover {
  background: #CCC;
  color: #FFF;
}

.tile-block .back-cover i:before {
  position: absolute;
  top: 50%;
  right: 25%;
  font-size: 1.5em;
}

.tile-block:hover .back-cover {
  opacity: 1;
  transform: translateY(0%);
}

@media screen and (max-width: 1480px) {
  .tiled-library-container {
    padding-right: 31%;
  }

  .tile-block {
    margin: 1% !important;
    width: 48%;
    height: 258px !important;
    min-width: 260px;
  }

  .tiles-row:nth-child(odd) .tile-block {
    float: right;
  }

  .tiles-row:nth-child(even) .tile-block {
    float: right;
  }

  /*  .tiles-row .tile-block:nth-child(1) {
      width: 48%;
      height: 258px;
    }*/
  /*.tiles-row:nth-child(odd) .tile-block:nth-child(3) {
      width: 98%;
      height: 254px;
  }*/
  /*.tiles-row:nth-child(even) .tile-block:nth-child(1) {
      width: 48%;
      height: 520px;
  }*/
}
@media screen and (max-width: 1280px) {
  .side-filter {
    float: none;
    clear: both;
    max-width: 100%;
    width: 100%;
    padding-bottom: 20px;
    position: relative;
    margin-bottom: 10px;
  }

  .tiled-library-container {
    padding-right: 0;
  }

  .input-wrapper {
    float: right;
    padding: 0 10px;
    min-width: 100%;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 780px) {
  .tile-block .date {
    left: 1px;
    max-width: 90px;
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
  }
}
@media screen and (max-width: 550px) {
  .tile-block {
    width: 100% !important;
    margin: 5px 0 !important;
  }
}
.toggle-wrapper {
  overflow: hidden;
  margin: 5px 0;
}

.toggle-view {
  font-size: 1em;
  margin: 0;
  min-width: 50%;
  text-align: center;
  background: #FFF;
  padding: 5px;
  display: block;
  float: right;
  border: 1px solid #ccc;
  color: #666;
  line-height: 25px;
  text-decoration: none;
  transition: all 0.2s ease-in;
}

.toggle-view:first-child {
  border-left: 0;
}

.toggle-view i {
  display: inline-block;
  margin: 0 6px;
  color: #0274de;
  font-size: 2em;
  position: relative;
  top: 4px;
}

.toggle-view.active {
  background: #0274de;
  color: #FFF;
}

.toggle-view:hover {
  text-decoration: none;
}

.toggle-view.active i {
  color: #FFF;
}

.library-grid {
  float: right;
  width: 100%;
  max-width: 1045px;
}

.library-tiles, .library-grid {
  min-height: 580px;
}

.library-tiles .main-content > h3 {
  text-align: center;
}

.tiled-discussion-container {
  padding: 16px 0;
  /* end discussion-block*/
}
.tiled-discussion-container .main-content {
  overflow: hidden;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.tiled-discussion-container .loader {
  background: url(../../img/classera_loading.gif) no-repeat;
  width: 100px;
  height: 100px;
  margin: 16px auto;
}
.tiled-discussion-container .discussion-block {
  position: relative;
  margin: 10px;
  height: 320px;
  overflow: hidden;
  box-shadow: none;
  text-decoration: none;
  background: #fff;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  border: 1px solid #eaeaea;
  min-width: 310px !important;
  max-width: 100% !important;
  flex-grow: 1;
}
.tiled-discussion-container .discussion-block:hover {
  opacity: 0.7;
}
.tiled-discussion-container .discussion-block i {
  font-style: normal;
}
.tiled-discussion-container .discussion-block .post {
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding: 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 15px;
}
.tiled-discussion-container .discussion-block .title {
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  display: block;
  white-space: nowrap;
  color: #444;
  margin-bottom: 0;
}
.tiled-discussion-container .discussion-block .activityOfficer {
  font-size: 14px;
  color: #444;
  margin: 0;
}
.tiled-discussion-container .discussion-block.create-new {
  text-align: center;
}
.tiled-discussion-container .discussion-block.create-new:after {
  display: block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f0c0";
  position: absolute;
  font-size: 12em;
  color: var(--main-color);
  width: 100%;
  top: 100px;
  z-index: 2;
}
.tiled-discussion-container .discussion-block.create-new .upper strong {
  font-size: 1.5em;
  font-weight: normal;
  text-transform: uppercase;
  margin-top: 10px;
  display: block;
}
.tiled-discussion-container .discussion-block .upper, .tiled-discussion-container .discussion-block .lower {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  color: #777;
  width: 100%;
  text-decoration: none;
  background: #fff;
}
.tiled-discussion-container .discussion-block .upper span, .tiled-discussion-container .discussion-block .lower span {
  display: block;
}
.tiled-discussion-container .discussion-block .upper {
  font-size: 1.3em;
  word-break: break-word;
  height: 265px;
}
.tiled-discussion-container .discussion-block .upper img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 10px 0;
  float: right;
}
.tiled-discussion-container .discussion-block .upper .imgBox {
  height: 85px;
  position: relative;
  margin-top: 10px;
}
.tiled-discussion-container .discussion-block .lower {
  top: auto;
  bottom: 0;
  color: #777;
  font-size: 1.5em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 70px;
  text-align: left;
}
.tiled-discussion-container .discussion-block .lower span {
  margin: 0 0 3px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.tiled-discussion-container .discussion-block .postInfo {
  float: right;
  margin-right: 20px;
  width: calc(100% - 80px);
  padding-top: 14px;
}
.tiled-discussion-container .discussion-block .date {
  position: relative;
  font-size: 12px;
  left: auto;
  right: auto;
  top: -3px;
}
.tiled-discussion-container .discussion-block .date:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f017";
  width: 15px;
  height: 13px;
  top: 1px;
  margin: 0 4px;
  position: relative;
  background: none;
}
.tiled-discussion-container .discussion-block .comments, .tiled-discussion-container .discussion-block .has_reaction {
  right: 15px;
  position: absolute;
  top: 46%;
  font-size: 14px;
  transform: translateY(-50%);
}
.tiled-discussion-container .discussion-block .has_reaction {
  left: 15px;
}
.tiled-discussion-container .discussion-block .has_reaction i {
  color: #66BB6A;
  font-size: 19px;
  margin-right: 5px;
}
.tiled-discussion-container .discussion-block .comments:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f086";
  width: 15px;
  height: 13px;
  top: 1px;
  margin: 0 4px;
  position: relative;
}
.tiled-discussion-container .teacher-tile .lower a {
  background: #fff;
  border: 0;
  padding: 6px 15px;
  color: var(--main-color);
  transition: all ease-in-out 0.4s;
  margin: 4px;
  font-size: 14px;
  border-radius: 25px;
  border: 1px solid;
}
.tiled-discussion-container .teacher-tile .lower a.delete-post {
  color: #e5301c;
}
.tiled-discussion-container span.current-sort {
  float: left;
  margin: 8px;
  color: var(--main-color);
}
.tiled-discussion-container .sort-rooms {
  float: left;
}
.tiled-discussion-container .add-sub-comment-form {
  display: none;
}
@media screen and (min-width: 768px) {
  .tiled-discussion-container .navbar-form .has-feedback .form-control-feedback {
    top: 6px;
  }
}
@media screen and (max-width: 1280px) {
  .tiled-discussion-container .input-wrapper {
    float: right;
    padding: 0 10px;
    min-width: 100%;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 1095px) {
  .tiled-discussion-container .glyphicon-search {
    display: none;
  }
}
@media screen and (max-width: 720px) {
  .tiled-discussion-container .sort-rooms, .tiled-discussion-container span.current-sort {
    float: none;
    display: inline-block;
  }
}
.tiled-discussion-container .discussion-tiles {
  min-height: 530px;
}
.tiled-discussion-container #users_add_list {
  border: 1px dotted #ddd;
}
.tiled-discussion-container .room-instructions label {
  display: block;
  cursor: pointer;
}
.tiled-discussion-container .room-instructions label:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f055";
  margin: 0 5px;
  position: relative;
  font-size: 1.2em;
  color: #0274de;
}
.tiled-discussion-container .room-instructions input {
  position: absolute;
  right: -9999999em;
}
.tiled-discussion-container .room-instructions textarea {
  width: 100%;
  display: none;
}
.tiled-discussion-container .room-instructions input:checked + textarea {
  display: block;
}
.tiled-discussion-container .room-form {
  overflow: hidden;
}
.tiled-discussion-container .room-form.step-2 .step-1 {
  display: none;
}
.tiled-discussion-container .room-form.step-2 .step-2 {
  display: block;
}
.tiled-discussion-container .room-form.step-1 .step-2 {
  display: none;
}
.tiled-discussion-container .room-form.step-1 .step-1 {
  display: block;
}

.main-article-content {
  /*.comments-main-content > .comment-holder:hover {
  	  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  	}
  */
  /* end media*/
}
.main-article-content .avatar-holder {
  text-align: center;
  padding: 0;
  margin: 6px 0;
  min-width: 40px;
}
.main-article-content .avatar-holder canvas, .main-article-content .avatar-holder img {
  border-radius: 50%;
  border: 4px solid #EEE;
  max-width: 80px;
  max-height: 80px;
  object-fit: cover;
  -o-object-fit: cover;
}
.main-article-content .post-title {
  margin-top: 3px;
  white-space: normal;
  word-wrap: break-word;
}
.main-article-content .post-instructions {
  white-space: normal;
  word-wrap: break-word;
}
.main-article-content .post-title + .lead {
  font-size: 1em;
}
.main-article-content .post-date {
  margin: 0;
}
.main-article-content .add-comment {
  min-width: 100%;
}
.main-article-content .media-body {
  /*border: 1px dashed $sidemenu_bg;
  background: $sidemenu_bg;*/
  padding: 16px;
  min-height: 100px;
  display: block;
  width: 100%;
}
.main-article-content .main-content {
  overflow: hidden;
}
.main-article-content .loader {
  background: url(../../img/classera_loading.gif) no-repeat;
  width: 100px;
  height: 100px;
  margin: 16px auto;
}
.main-article-content .not-approved {
  border: 1px dotted #F00;
}
.main-article-content .page-body .add-sub-comment-form {
  display: none;
  margin: 16px;
  background: transparent;
  width: 100%;
}
.main-article-content .add-sub-comment-btn {
  margin: 15px 0 0;
}
.main-article-content .not-approved-msg {
  color: #F00;
  font-size: 0.8em;
  margin: 16px 0 0;
}
.main-article-content .add-post-checkbox {
  display: none;
}
.main-article-content .add-post {
  display: none;
}
.main-article-content .add-post-checkbox:checked + .add-post {
  display: block;
}
.main-article-content .add-post-btn {
  height: 40px;
  box-sizing: border-box;
  line-height: 32px;
  border-radius: 1px;
  position: relative;
  top: -2px;
  left: -4px;
}
.main-article-content .comments-main-content > .comment-holder {
  /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
  /*transition: all 0.3s cubic-bezier(.25,.8,.25,1);*/
  background: #fff;
}
.main-article-content .comment-holder .comment-holder {
  display: none;
}
.main-article-content .show-comment {
  float: right;
  display: block;
  cursor: pointer;
  clear: both;
  margin-top: 20px;
}
.main-article-content .alert-success {
  padding: 25px !important;
}
.main-article-content .media-text * {
  line-height: initial !important;
}
.main-article-content form {
  width: 100%;
  background: transparent;
}
.main-article-content .mainComment {
  /*    .comment-body-inner{
      	background: $sidemenu_bg;
      	border-radius: 30px;
      }*/
}
.main-article-content .mainComment:not(:last-of-type) {
  border-bottom: 1px solid #ddd;
}
.main-article-content .mainComment .avatar-holder a {
  display: block;
}
@media screen and (max-width: 512px) {
  .main-article-content .mainComment .avatar-holder a {
    padding: 0;
  }
}
.main-article-content .mainComment .avatar-holder img {
  float: none;
  margin: 0 auto;
}
.main-article-content .mainComment .subComment {
  background: #eee !important;
  padding: 10px;
  border-radius: 7px;
  display: grid;
  grid-template-columns: 60px auto;
}
.main-article-content .mainComment .subComment .avatar-holder img {
  max-width: 50px;
  max-height: 50px;
}
.main-article-content .mainComment .subComment .repliesOfSubComments {
  border-top: 1px solid #ddd;
}
.main-article-content .mainComment .subComment .subComment:not(:last-of-type) {
  border-radius: 0;
  border-bottom: 1px solid #ddd;
}
@media only screen and (min-width: 992px) {
  .main-article-content {
    /*   .mainComment .comment-body {
       padding-right: 40px;
     		margin-top: 27px;

       &:before{
       	position:absolute;
       	content: '';
       	right:-10px;
       	top:34px;
        width: 50px;
        height: 60px;
        background: $sidemenu_bg;
        clip-path: polygon(100% 0, 62% 28%, 44% 44%, 26% 61%, 12% 79%, 0 100%, 0 0);
        border-left: 0;
        transform: rotateY(180deg);
    }
    .media-body{
        border-radius: 30px;
    }
    .media-text{
    	font-size: 17px;
    	font-weight: bold;
    }
      }*/
    /*  .subComment {
      	.comment-body{
     			margin-top: 0;
      		&:before{
      			display:none;
      		}
      	}
      	.post-wrapper{
      		&:before{
        	position:absolute;
        	content: '';
        	right:10px;
    	    width: 34px;
    	    height: 40px;
    	    background: $bg_e;
    	    clip-path: polygon(100% 0, 62% 28%, 44% 44%, 26% 61%, 12% 79%, 0 100%, 0 0);
    	    border-left: 0;
    	    transform: rotateY(180deg);
    	}
    }
     	}*/
  }
  .main-article-content .comment-holder {
    box-shadow: none !important;
    background: transparent !important;
  }
  .main-article-content #attachment-flag-report {
    left: 15px;
    top: 18px;
  }
}
.main-article-content .subComment .comment-body .media-body {
  padding: 0;
  border-radius: 0;
}
.main-article-content .subComment .comment-body .comment-body-inner {
  border-radius: 0;
}
.main-article-content .subComment .comment-body .comment-holder {
  margin-top: 0px;
}
.main-article-content .subComment .comment-body .post-wrapper {
  background: #eee;
  padding: 10px 15px;
  min-width: 200px;
  border-radius: 30px;
  display: inline-block;
  border-top-right-radius: 0;
  max-width: calc(100% - 35px);
}
.main-article-content .post-actions-block {
  margin: 10px 0 10px;
}
.main-article-content .post-actions-block .btn {
  margin: 0 1px;
  outline: 0 !important;
  box-shadow: none;
  background: transparent;
  font-size: 17px;
  color: #777;
  border: 0px solid #ddd;
}
.main-article-content .post-actions-block .btn i {
  font-size: 15px;
  margin: 0 8px;
}
@media screen and (max-width: 767px) {
  .main-article-content .post-actions-block {
    margin: 10px 0 0;
  }
  .main-article-content .post-actions-block .btn {
    font-size: 13px;
    padding: 5px 4px;
  }
  .main-article-content .post-actions-block .btn i {
    font-size: 13px;
    margin: 0 3px;
  }
  .main-article-content .subComment {
    padding: 5px 0 !important;
    grid-template-columns: 40px auto !important;
  }
  .main-article-content .subComment .media-heading {
    padding: 0;
  }
  .main-article-content .subComment .btn-group.report_content {
    left: -8px;
    right: auto;
  }
  .main-article-content .subComment .avatar-holder img {
    max-width: 40px !important;
    max-height: 40px !important;
  }
  .main-article-content .subComment .comment-body .post-wrapper {
    min-width: auto;
    padding: 5px 0;
    padding-right: 10px;
  }
}

#PostsArticleForm {
  width: 98% !important;
}

@media screen and (max-width: 767px) {
  .main-article-content,
#CommentSection,
.comment-body .post-wrapper,
.comments-list {
    padding: 0;
  }
}
.scrtabs-tab-container {
  position: relative;
}

#content_wrapper .scrtabs-tab-container {
  position: relative;
}
#content_wrapper .scrtabs-tab-container .nav-tabs.nav-justified {
  display: block !important;
}
@media screen and (min-width: 768px) {
  #content_wrapper .scrtabs-tab-container .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
    min-width: 90px;
  }
}

.scrtabs-tab-container .tab-content {
  clear: left;
}

.scrtabs-tabs-fixed-container {
  float: left;
  overflow: hidden !important;
  width: calc(100% - 36px) !important;
}

.scrtabs-tabs-movable-container {
  position: relative !important;
}

.scrtabs-tabs-movable-container .tab-content {
  display: none;
}

.scrtabs-tab-scroll-arrow {
  border-top: 0;
  color: var(--main-color);
  cursor: pointer !important;
  float: left;
  background: transparent;
  font-size: 12px;
  padding-left: 2px;
  padding-top: 17px;
  width: 18px;
  height: 61px;
  position: relative;
  z-index: 1;
}

.scrtabs-tab-scroll-arrow:hover {
  color: var(--main-color);
}

.scrtabs-tab-scroll-arrow.scrtabs-disable {
  color: #ddd;
  cursor: default !important;
}

.scrtabs-tabs-fixed-container ul.nav-tabs > li {
  white-space: nowrap !important;
}

@media screen and (max-width: 767px) {
  .scrtabs-tab-scroll-arrow {
    height: 61px;
  }
}
.scrtabs-tab-scroll-arrow.scrtabs-js-tab-scroll-arrow-right {
  position: absolute;
  right: 0;
}

@media screen and (max-width: 530px) {
  .scrtabs-tab-scroll-arrow.scrtabs-js-tab-scroll-arrow-right {
    right: 0px;
  }
}
.main-container.with-chat .scrtabs-tabs-movable-container {
  padding-left: 50px;
}

/*.scrtabs-tab-container .nav-tabs.nav-justified>li>a{
	margin: 0 1px;
}*/
.parents-students-requests h2 {
  color: #444;
  text-align: center;
  font-weight: normal;
}
.parents-students-requests .students-list {
  list-style: none;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  /* background of the scrollbar except button or resizer */
  /* scrollbar itself */
  /* set button(top and bottom of the scrollbar) */
}
.parents-students-requests .students-list::-webkit-scrollbar {
  background-color: transparent;
  width: 16px;
}
.parents-students-requests .students-list::-webkit-scrollbar-track {
  background-color: transparent;
}
.parents-students-requests .students-list::-webkit-scrollbar-thumb {
  background-color: #babac0;
  border-radius: 16px;
  border: 5px solid #fff;
}
.parents-students-requests .students-list::-webkit-scrollbar-track:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.parents-students-requests .students-list::-webkit-scrollbar-button {
  display: none;
}
.parents-students-requests .student-item {
  height: 240px;
  position: relative;
  padding: 10px 25px 10px;
  font-size: 1.7em;
  display: inline-block;
  overflow: hidden;
  margin: 10px;
  background: #fafafa;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #eaeaea;
}
.parents-students-requests .student-item.student-item-xl {
  height: 275px;
}
.parents-students-requests .student-item img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #EEE;
}
.parents-students-requests .student-item strong {
  display: block;
  font-weight: 500;
  margin-top: 10px;
  font-size: 16px;
}
.parents-students-requests .student-item span {
  color: #808080;
  font-size: 14px;
}
.parents-students-requests .student-item time {
  display: block;
  color: var(--main-color);
  font-size: 14px;
}
.parents-students-requests .sections-selects label {
  display: inline-block;
  margin: 0 20px;
  text-align: center;
}
.parents-students-requests .sections-selects label select {
  display: block;
}
.parents-students-requests .student-left {
  border: 0;
  background: var(--main-color);
  color: #FFF;
  font-size: 0.6em;
  padding: 8px 20px;
  cursor: pointer;
  border-radius: 25px;
  margin-top: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.parents-students-requests .student-item-xl .student-left {
  margin-top: 20px;
}
.parents-students-requests .student-left:hover {
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.25);
}
.parents-students-requests .requests-page-header {
  position: relative;
  padding: 16px;
  font-weight: 500 !important;
}
.parents-students-requests .expand-view, .parents-students-requests .play-audio {
  font-size: 1.2em;
  float: left;
  padding: 5px;
  border-radius: 3px;
}
.parents-students-requests .play-audio {
  float: right;
  width: 40px;
}
.parents-students-requests .play-audio:hover, .parents-students-requests .play-audio:focus {
  color: var(--main-color);
  cursor: pointer;
}
.parents-students-requests .student-item p.text-info {
  font-size: 0.6em;
  margin: 10px 0 0;
  border-top: 1px dashed #CCC;
  padding-top: 10px;
}
.parents-students-requests .student-item.student-dissmissed strong, .parents-students-requests .student-item.student-dissmissed p.text-info {
  color: var(--main-color);
}
.parents-students-requests .student-item.student-check-out strong, .parents-students-requests .student-item.student-check-out p.text-info {
  color: #81c784;
}

img.callingImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.callBox {
  padding: 10%;
}

.call-animation {
  display: block;
  background: #fff;
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
  border-radius: 100%;
  border: solid 5px #fff;
  animation: play 2s ease infinite;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

#childModalBody {
  position: relative;
  padding: 5%;
  background: #fff;
  border-radius: 29px;
  overflow: hidden;
}

#callaingModal {
  background: rgba(0, 0, 0, 0.45);
}

@keyframes play {
  0% {
    transform: scale(1);
  }
  15% {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4);
  }
  25% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4), 0 0 0 20px rgba(255, 255, 255, 0.2);
  }
  25% {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.4), 0 0 0 30px rgba(55, 207, 221, 0.2);
  }
}
.callStudentName {
  text-align: center;
  padding-top: 1%;
  font-size: 18px !important;
  color: #444;
}

.callStudenttitle {
  text-align: center;
  padding-top: 4%;
  margin: 0;
  color: #888;
}

.cancelCallStudent {
  display: block;
  font-size: 20px;
  color: #fff;
  margin: auto;
  text-align: center;
  margin-top: 15px;
  border-radius: 25px;
  padding: 4px 20px;
  border-color: #ff4f60;
  background: #ff4f60 !important;
  width: 48%;
}

#callingModalContent {
  border-radius: 25px;
  padding: 20px 0;
}

.callStudenttitle img {
  width: 10%;
}

.callingIcon:before {
  content: "\f0a2";
  color: #36cfdc;
  position: absolute;
  margin-right: 0;
  font-size: 3em;
}

.books-listing {
  margin-top: 50px;
}
.books-listing .book {
  width: 80%;
  margin: 25px auto;
  border: 1px solid #eee;
  position: relative;
  background-color: #fff;
}
.books-listing .book .row {
  display: flex;
  align-items: center;
}
.books-listing .book .row .left {
  width: 33.3333%;
  float: right;
}
.books-listing .book .row .left .book__image img {
  width: 190px;
  height: 230px;
  object-fit: cover;
  border-radius: 5px;
  position: relative;
  bottom: 30px;
  right: 20px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 14px 28px, rgba(0, 0, 0, 0.22) 0 10px 10px;
}
.books-listing .book .row .right {
  width: 66.666667%;
  float: right;
  padding-right: 20px;
}
.books-listing .book .row .right .book__title {
  margin-bottom: 15px;
  padding: 0 10px;
}
.books-listing .book .row .right .book__title a {
  color: #444;
  font-weight: normal;
}
.books-listing .book .row .right .book__title a:before {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  content: "";
}
.books-listing .book .row .right .book__download--btn,
.books-listing .book .row .right .book__view--btn {
  margin-bottom: 15px;
}
.books-listing .book .row .right .book__download--btn a,
.books-listing .book .row .right .book__view--btn a {
  width: 170px;
  font-size: 16px;
}

.booksListPage .flip-container {
  border-radius: 7px;
  height: 300px;
  padding-top: 10%;
}
.booksListPage .flip-container .flipper {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #eee;
  transition: ease-in-out 0.3s;
  max-width: 550px;
  margin: 0 auto;
}
.booksListPage .flip-container .flipper .frontWrapper .front {
  z-index: 2;
  position: relative;
  margin-top: -50px;
  height: 238px;
}
.booksListPage .flip-container .flipper .frontWrapper .front img {
  width: 92%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px 5px 0 0;
  box-shadow: rgba(0, 0, 0, 0.25) 0 14px 28px, rgba(0, 0, 0, 0.22) 0 10px 10px;
}
.booksListPage .flip-container .flipper .backWrapper .back {
  height: 197px;
  padding-top: 30px;
}
.booksListPage .flip-container .flipper .backWrapper .back .databox-top h2 {
  text-align: center;
  font-size: 19px !important;
  color: #444;
  font-weight: 500 !important;
}
.booksListPage .flip-container .flipper .backWrapper .back .databox-bottom .databox-text {
  color: #777;
  white-space: pre-line;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 90%;
  margin: 0 auto;
}
@media only screen and (max-width: 800px) {
  .booksListPage .flip-container .flipper .backWrapper .back .databox-bottom .databox-text {
    width: 100%;
  }
}
.booksListPage .flip-container .flipper .backWrapper .back .btn {
  width: calc(100% - 80px);
  position: absolute;
  bottom: 15px;
  padding: 6px;
  font-size: 15px;
  left: 50%;
  transform: translateX(-50%);
}
.booksListPage .flip-container .flipper .backWrapper .back .btn i {
  margin: 0 5px;
}
.booksListPage .flip-container .flipper:hover {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}

.managePrivilges .box > h3:before {
  height: 2px;
  width: 38px;
  position: absolute;
  content: "";
  right: 2px;
  bottom: 0;
  background: var(--main-color);
}

.managePrivilges .actionsDetailsBox label {
  padding-left: 28px !important;
  position: relative;
}

.managePrivilges .actionsDetailsBox.dashboardPrivielges i {
  left: 0;
}

.managePrivilges ul.dashboardPrivielges li {
  position: relative;
}

.managePrivilges h3 {
  background: #fafafa;
  padding: 10px;
  font-size: 16px;
}

.managePrivilges ul li,
.managePrivilges .actionsDetailsBox label,
#FunctionalityDetailsList .selecetAllFunctionsBox label {
  display: block;
  font-size: 14px;
  color: #444;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
  border-radius: 4px;
  text-transform: capitalize;
  position: relative;
}

.managePrivilges ul li#announcements {
  padding: 10px !important;
}

.managePrivilges ul li:hover,
.managePrivilges .actionsDetailsBox label:hover,
#FunctionalityDetailsList .selecetAllFunctionsBox label:hover {
  background: #fafafa !important;
  color: #444 !important;
}

.managePrivilges ul.nav li:hover {
  background: transparent !important;
}

.managePrivilges ul li.selected {
  background: var(--main-color) !important;
  color: #fff !important;
}

.managePrivilges .actionsDetailsBox label,
#FunctionalityDetailsList .selecetAllFunctionsBox label {
  margin: 5px;
}

#schoolsList #selectAllSchools {
  font-size: 14px;
  font-weight: bold;
  color: var(--main-color);
  display: none;
}

.managePrivilges .box {
  background: #fff;
  /*box-shadow: 0 0 10px rgba(0,0,0,.25);*/
  border: 1px solid #ddd;
  height: 700px;
  max-height: 700px;
  border-radius: 7px;
}

.managePrivilges #sendActionsStatus {
  background: var(--main-color);
  color: #fff !important;
  padding: 10px;
  margin-top: 7px;
  border-radius: 3px;
  transition: all ease-in-out 0.5s;
  outline: none;
  width: 120px;
}

.managePrivilges #sendActionsStatus:hover {
  background: rgba(var(--main-color-rgb), 90%);
}

.managePrivilges #sendActionsStatus.success {
  background: #a0d468;
}

.managePrivilges .box > h3 {
  background: #fff;
  font-size: 17px;
  margin: 0 0 10px 0;
  padding: 15px 5px;
  position: relative;
}

.managePrivilges ul:not(.jstree-children, .nav),
.managePrivilges .actionsDetailsBox, .managePrivilges ul.jstree-container-ul {
  height: 460px;
  max-height: 460px;
  overflow-y: auto;
}

.managePrivilges .actionsDetailsBox i,
#FunctionalityDetailsList .selecetAllFunctionsBox i {
  width: 17px;
  height: 17px;
  background: #fff;
  border: 1px solid var(--main-color);
  margin: 0 9px;
  border-radius: 4px;
}

.managePrivilges .dashboardPrivielges i {
  border: none;
  border-radius: 0;
  color: var(--main-color);
  background: transparent;
  position: absolute;
  top: 12px;
  font-size: 16px;
}

.role input[type=checkbox]:checked + label i:before,
.selecetAllFunctionsBox input[type=checkbox]:checked + label i:before {
  visibility: visible;
}

.managePrivilges .actionsDetailsBox input,
#FunctionalityDetailsList .selecetAllFunctionsBox input {
  visibility: hidden;
}

.managePrivilges .submitBox {
  text-align: center;
  border-top: 1px solid #ddd;
}

.managePrivilges #rolesList,
.managePrivilges #mainFunctionalityList,
.managePrivilges #FunctionalityDetailsList {
  display: none;
}

.managePrivilges .preLoad {
  text-align: center;
  margin-top: 50%;
}

.managePrivilges .preLoad img {
  width: 60px;
}

.managePrivilges .success_flash, .managePrivilges .error_flash {
  display: none;
}

.managePrivilges input.search {
  padding: 7px;
  display: block;
  width: 90%;
  margin: 8px auto;
  background: #fff;
  border-radius: 3px;
}

.role input[type=checkbox]:checked + label,
.selecetAllFunctionsBox #_selectAlltranslate[type=checkbox]:checked + label {
  background: #EF9A9A;
  color: #fff;
}

.managePrivilges .actionsDetailsBox i:before,
#FunctionalityDetailsList .selecetAllFunctionsBox i:before {
  visibility: hidden;
  color: #EF9A9A;
  transition: all ease-in-out 0.3s;
}

.role input[type=checkbox]:checked + label i, .selecetAllFunctionsBox #_selectAlltranslate[type=checkbox]:checked + label i {
  border-color: #EF9A9A;
}

.managePrivilges .actionsDetailsBox .conflictIcon {
  border-radius: 50%;
  font-size: 13px;
  width: 20px;
  padding-top: 3px;
  height: 20px;
  position: absolute;
  text-align: center;
  border: 0.5px solid rgba(240, 21, 20, 0.26);
  background: #fff;
  float: left;
  left: 6px;
}

.managePrivilges .actionsDetailsBox .conflictIcon:before {
  color: #ff6666;
}

@media only screen and (max-width: 530px) {
  .managePrivilges .box {
    height: 400px;
    max-height: 400px;
  }

  .managePrivilges ul,
.managePrivilges .actionsDetailsBox {
    height: 245px;
    max-height: 245px;
  }

  .managePrivilges #sendActionsStatus {
    margin-top: 0;
  }
}
.managePrivilges #schoolsList {
  display: none;
}

.managePrivilges .userName {
  position: relative;
  background: none;
  font-size: 18px;
}

.managePrivilges .userName i {
  margin: 0 12px;
  color: var(--main-color);
}

.ui-jqgrid .attendance_notes_field {
  padding: 0 !important;
  border-radius: 3px;
  height: 28px;
  width: 92%;
  resize: vertical;
}

.managePrivilges .nav-tabs {
  height: auto;
  margin-bottom: 15px;
  overflow: hidden;
}

.managePrivilges .nav-tabs li {
  padding: 0;
}

#FunctionalityDetailsList .conflict {
  color: #ff6666;
  border: 1px solid #ff6666;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 50%;
  transition: all ease-in-out 0.3s;
  font-size: 14px;
  padding-top: 2px;
  display: none;
  float: left;
}

#FunctionalityDetailsList .conflict:hover {
  background: #ff6666;
  color: #fff;
}

#confirmConflictModal i {
  font-size: 17px;
  margin: 0 8px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  color: #ff6666;
  padding-top: 5px;
}

#confirmConflictModal .modal-footer {
  border-top: 1px solid #e5e5e5;
  background: #fff;
}

#confirmConflictModal p {
  margin: 16px;
  font-size: 14px;
  color: #555;
}

#confirmConflictModal {
  border-top: 1px solid #eee;
}

#sendActionsStatus.disabled {
  pointer-events: none;
}

.managePrivilges ul::-webkit-scrollbar,
.actionsDetailsBox::-webkit-scrollbar {
  background-color: transparent;
  border-radius: 10px;
  width: 8px;
}

.managePrivilges ul::-webkit-scrollbar-thumb,
.actionsDetailsBox::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.55);
  border-radius: 5px;
}

.selecetAllFunctionsBox #_selectAlltranslate[type=checkbox]:checked + label i:before {
  visibility: visible;
}

.managePrivilges .actionsDetailsBox.dashboardPrivielges i:before {
  visibility: visible;
}

.managePrivilges .dashboardPrivielges label {
  margin: 0;
  padding: 0;
  width: 92%;
}

#descModal label,
#descModal input,
#descModal textarea {
  display: block;
  color: #444;
  padding: 10px;
  width: 98%;
  margin: 0 auto;
  resize: none;
  border-radius: 5px;
}

#descModal .modal-dialog {
  margin-top: 17vh;
}

#descModal {
  z-index: 11111111111;
}

.managePrivilges .dashboardPrivielges i:before {
  color: var(--main-color);
  transition: all ease-in-out 0.3s;
  font-size: 16px;
}

.managePrivilges .dashboardPrivielges li.selected i:before {
  color: #fff;
}

.managePrivilegesLoding .actions,
.managePrivilegesLoding .nav-tabs.nav-justified {
  visibility: hidden;
}

.managePrivilegesLoding .actions,
.managePrivilegesLoding .nav-tabs.nav-justified {
  visibility: hidden;
}

.priviligesNotLoaded .table-actions, .managePrivilegesLoding .tab, .managePrivilegesLoding .mailBoxSideMenu {
  opacity: 0;
}

.managePrivilegesLoding .stuIndexLoading {
  display: block;
}

.managePrivilges .actionsDetailsBox > div > input[type=checkbox] {
  display: none;
}

/*#region Tab*/
.nav-tabs {
  margin-bottom: 0;
  margin-left: 0;
  border: 0;
  top: 2px;
  /*background-color: #fafafa;*/
  outline: none !important;
}

.nav-tabs > li {
  margin-bottom: -2px;
  /*#region Colred Tab*/
  /*#endregion Colred Tab*/
}

.nav-tabs > li > a:hover {
  color: #262626;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs > li > a:active,
.nav-tabs > li > a:focus {
  outline: none !important;
}

.nav-tabs > li > a,
.nav-tabs > li > a:focus {
  border-radius: 0 !important;
  color: #777;
  margin-left: -1px;
  line-height: 12px;
  position: relative;
  z-index: 11;
}

.nav-tabs > li > a > .badge {
  padding: 0 4px;
  line-height: 15px;
  opacity: 0.75;
  height: 16px;
  min-width: 16px;
}

.nav-tabs > li > a .fa,
.nav-tabs > li > a .glyphicon,
.nav-tabs > li > a .typcn,
.nav-tabs > li > a .wi {
  opacity: 0.75;
}

.nav-tabs > li:first-child > a {
  margin-right: 0;
  border-right: 1px solid #fbfbfb;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #262626;
  border: 0;
  border-top: 2px solid var(--main-color);
  border-bottom-color: transparent;
  z-index: 12;
  box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.15);
}

.nav-tabs > li.active > a > .badge,
.nav-tabs > li.active > a > [class*=fa-] {
  opacity: 1;
}

.nav-tabs > li.active.tab-white > a {
  border-color: #fff !important;
}

.nav-tabs > li.active.tab-white > a > .fa,
.nav-tabs > li.active.tab-white > a .glyphicon,
.nav-tabs > li.active.tab-white > a .typcn,
.nav-tabs > li.active.tab-white > a .wi {
  color: #fff;
}

.nav-tabs > li.active tab-snow > a {
  border-color: #fbfbfb !important;
}

.nav-tabs > li.active tab-snow > a > .fa,
.nav-tabs > li.active tab-snow > a .glyphicon,
.nav-tabs > li.active tab-snow > a .typcn,
.nav-tabs > li.active tab-snow > a .wi {
  color: #fbfbfb;
}

.nav-tabs > li.active.tab-whitesmoke > a {
  border-color: #f5f5f5 !important;
}

.nav-tabs > li.active.tab-whitesmoke > a > .fa,
.nav-tabs > li.active.tab-whitesmoke > a .glyphicon,
.nav-tabs > li.active.tab-whitesmoke > a .typcn,
.nav-tabs > li.active.tab-whitesmoke > a .wi {
  color: #f5f5f5;
}

.nav-tabs > li.active.tab-seashell > a {
  border-color: #f3f3f3 !important;
}

.nav-tabs > li.active.tab-seashell > a > .fa,
.nav-tabs > li.active.tab-seashell > a .glyphicon,
.nav-tabs > li.active.tab-seashell > a .typcn,
.nav-tabs > li.active.tab-seashell > a .wi {
  color: #f3f3f3;
}

.nav-tabs > li.active.tab-ivory > a {
  border-color: #eee !important;
}

.nav-tabs > li.active.tab-ivory > a > .fa,
.nav-tabs > li.active.tab-ivory > a .glyphicon,
.nav-tabs > li.active.tab-ivory > a .typcn,
.nav-tabs > li.active.tab-ivory > a .wi {
  color: #eee;
}

.nav-tabs > li.active.tab-platinum > a {
  border-color: #e5e5e5 !important;
}

.nav-tabs > li.active.tab-platinum > a > .fa,
.nav-tabs > li.active.tab-platinum > a .glyphicon,
.nav-tabs > li.active.tab-platinum > a .typcn,
.nav-tabs > li.active.tab-platinum > a .wi {
  color: #e5e5e5;
}

.nav-tabs > li.active.tab-lightgray > a {
  border-color: #d0d0d0 !important;
}

.nav-tabs > li.active.tab-lightgray > a > .fa,
.nav-tabs > li.active.tab-lightgray > a .glyphicon,
.nav-tabs > li.active.tab-lightgray > a .typcn,
.nav-tabs > li.active.tab-lightgray > a .wi {
  color: #d0d0d0;
}

.nav-tabs > li.active.tab-gray > a {
  border-color: #ccc !important;
}

.nav-tabs > li.active.tab-gray > a > .fa,
.nav-tabs > li.active.tab-gray > a .glyphicon,
.nav-tabs > li.active.tab-gray > a .typcn,
.nav-tabs > li.active.tab-gray > a .wi {
  color: #ccc;
}

.nav-tabs > li.active.tab-darkgray > a {
  border-color: #999 !important;
}

.nav-tabs > li.active.tab-darkgray > a > .fa,
.nav-tabs > li.active.tab-darkgray > a .glyphicon,
.nav-tabs > li.active.tab-darkgray > a .typcn,
.nav-tabs > li.active.tab-darkgray > a .wi {
  color: #999;
}

.nav-tabs > li.active.tab-silver > a {
  border-color: #777 !important;
}

.nav-tabs > li.active.tab-silver > a > .fa,
.nav-tabs > li.active.tab-silver > a .glyphicon,
.nav-tabs > li.active.tab-silver > a .typcn,
.nav-tabs > li.active.tab-silver > a .wi {
  color: #777;
}

.nav-tabs > li.active.tab-sonic-silver > a {
  border-color: #737373 !important;
}

.nav-tabs > li.active.tab-sonic-silver > a > .fa,
.nav-tabs > li.active.tab-sonic-silver > a .glyphicon,
.nav-tabs > li.active.tab-sonic-silver > a .typcn,
.nav-tabs > li.active.tab-sonic-silver > a .wi {
  color: #737373;
}

.nav-tabs > li.active.tab-storm-cloud > a {
  border-color: #666 !important;
}

.nav-tabs > li.active.tab-storm-cloud > a > .fa,
.nav-tabs > li.active.tab-storm-cloud > a .glyphicon,
.nav-tabs > li.active.tab-storm-cloud > a .typcn,
.nav-tabs > li.active.tab-storm-cloud > a .wi {
  color: #666;
}

.nav-tabs > li.active.tab-lightcarbon > a {
  border-color: #555 !important;
}

.nav-tabs > li.active.tab-lightcarbon > a > .fa,
.nav-tabs > li.active.tab-lightcarbon > a .glyphicon,
.nav-tabs > li.active.tab-lightcarbon > a .typcn,
.nav-tabs > li.active.tab-lightcarbon > a .wi {
  color: #555;
}

.nav-tabs > li.active.tab-carbon > a {
  border-color: #444 !important;
}

.nav-tabs > li.active.tab-carbon > a > .fa,
.nav-tabs > li.active.tab-carbon > a .glyphicon,
.nav-tabs > li.active.tab-carbon > a .typcn,
.nav-tabs > li.active.tab-carbon > a .wi {
  color: #444;
}

.nav-tabs > li.active.tab-primary > a {
  border-color: #4374e0 !important;
}

.nav-tabs > li.active.tab-primary > a > .fa,
.nav-tabs > li.active.tab-primary > a .glyphicon,
.nav-tabs > li.active.tab-primary > a .typcn,
.nav-tabs > li.active.tab-primary > a .wi {
  color: #4374e0;
}

.nav-tabs > li.active.tab-slate-gray > a {
  border-color: #333 !important;
}

.nav-tabs > li.active.tab-slate-gray > a > .fa,
.nav-tabs > li.active.tab-slate-gray > a .glyphicon,
.nav-tabs > li.active.tab-slate-gray > a .typcn,
.nav-tabs > li.active.tab-slate-gray > a .wi {
  color: #333;
}

.nav-tabs > li.active.tab-darkcarbon > a {
  border-color: #262626 !important;
}

.nav-tabs > li.active.tab-darkcarbon > a > .fa,
.nav-tabs > li.active.tab-darkcarbon > a .glyphicon,
.nav-tabs > li.active.tab-darkcarbon > a .typcn,
.nav-tabs > li.active.tab-darkcarbon > a .wi {
  color: #262626;
}

.nav-tabs > li.active.tab-blue > a {
  border-color: #5db2ff !important;
}

.nav-tabs > li.active.tab-blue > a > .fa,
.nav-tabs > li.active.tab-blue > a .glyphicon,
.nav-tabs > li.active.tab-blue > a .typcn,
.nav-tabs > li.active.tab-blue > a .wi {
  color: #5db2ff;
}

.nav-tabs > li.active.tab-info > a {
  border-color: #57b5e3 !important;
}

.nav-tabs > li.active.tab-info > a > .fa,
.nav-tabs > li.active.tab-info > a .glyphicon,
.nav-tabs > li.active.tab-info > a .typcn,
.nav-tabs > li.active.tab-info > a .wi {
  color: #57b5e3;
}

.nav-tabs > li.active.tab-sky > a {
  border-color: #11a9cc !important;
}

.nav-tabs > li.active.tab-sky > a > .fa,
.nav-tabs > li.active.tab-sky > a .glyphicon,
.nav-tabs > li.active.tab-sky > a .typcn,
.nav-tabs > li.active.tab-sky > a .wi {
  color: #11a9cc;
}

.nav-tabs > li.active.tab-primary > a {
  border-color: #4374e0 !important;
}

.nav-tabs > li.active.tab-primary > a > .fa,
.nav-tabs > li.active.tab-primary > a .glyphicon,
.nav-tabs > li.active.tab-primary > a .typcn,
.nav-tabs > li.active.tab-primary > a .wi {
  color: #4374e0;
}

.nav-tabs > li.active.tab-primary > a {
  border-color: #4374e0 !important;
}

.nav-tabs > li.active.tab-primary > a > .fa,
.nav-tabs > li.active.tab-primary > a .glyphicon,
.nav-tabs > li.active.tab-primary > a .typcn,
.nav-tabs > li.active.tab-primary > a .wi {
  color: #4374e0;
}

.nav-tabs > li.active.tab-blueberry > a {
  border-color: #6f85bf !important;
}

.nav-tabs > li.active.tab-blueberry > a > .fa,
.nav-tabs > li.active.tab-blueberry > a .glyphicon,
.nav-tabs > li.active.tab-blueberry > a .typcn,
.nav-tabs > li.active.tab-blueberry > a .wi {
  color: #6f85bf;
}

.nav-tabs > li.active.tab-palegreen > a {
  border-color: #a0d468 !important;
}

.nav-tabs > li.active.tab-palegreen > a > .fa,
.nav-tabs > li.active.tab-palegreen > a .glyphicon,
.nav-tabs > li.active.tab-palegreen > a .typcn,
.nav-tabs > li.active.tab-palegreen > a .wi {
  color: #a0d468;
}

.nav-tabs > li.active.tab-success > a {
  border-color: #53a93f !important;
}

.nav-tabs > li.active.tab-success > a > .fa,
.nav-tabs > li.active.tab-success > a .glyphicon,
.nav-tabs > li.active.tab-success > a .typcn,
.nav-tabs > li.active.tab-success > a .wi {
  color: #53a93f;
}

.nav-tabs > li.active.tab-green > a {
  border-color: #8cc474 !important;
}

.nav-tabs > li.active.tab-green > a > .fa,
.nav-tabs > li.active.tab-green > a .glyphicon,
.nav-tabs > li.active.tab-green > a .typcn,
.nav-tabs > li.active.tab-green > a .wi {
  color: #8cc474;
}

.nav-tabs > li.active.tab-lightyellow > a {
  border-color: #f6d52e !important;
}

.nav-tabs > li.active.tab-lightyellow > a > .fa,
.nav-tabs > li.active.tab-lightyellow > a .glyphicon,
.nav-tabs > li.active.tab-lightyellow > a .typcn,
.nav-tabs > li.active.tab-lightyellow > a .wi {
  color: #f6d52e;
}

.nav-tabs > li.active.tab-yellow > a {
  border-color: #ffce55 !important;
}

.nav-tabs > li.active.tab-yellow > a > .fa,
.nav-tabs > li.active.tab-yellow > a .glyphicon,
.nav-tabs > li.active.tab-yellow > a .typcn,
.nav-tabs > li.active.tab-yellow > a .wi {
  color: #ffce55;
}

.nav-tabs > li.active.tab-warning > a {
  border-color: #f4b400 !important;
}

.nav-tabs > li.active.tab-warning > a > .fa,
.nav-tabs > li.active.tab-warning > a .glyphicon,
.nav-tabs > li.active.tab-warning > a .typcn,
.nav-tabs > li.active.tab-warning > a .wi {
  color: #f4b400;
}

.nav-tabs > li.active.tab-gold > a {
  border-color: #f9b256 !important;
}

.nav-tabs > li.active.tab-gold > a > .fa,
.nav-tabs > li.active.tab-gold > a .glyphicon,
.nav-tabs > li.active.tab-gold > a .typcn,
.nav-tabs > li.active.tab-gold > a .wi {
  color: #f9b256;
}

.nav-tabs > li.active.tab-orange > a {
  border-color: #fb6e52 !important;
}

.nav-tabs > li.active.tab-orange > a > .fa,
.nav-tabs > li.active.tab-orange > a .glyphicon,
.nav-tabs > li.active.tab-orange > a .typcn,
.nav-tabs > li.active.tab-orange > a .wi {
  color: #fb6e52;
}

.nav-tabs > li.active.tab-lightred > a {
  border-color: #e46f61 !important;
}

.nav-tabs > li.active.tab-lightred > a > .fa,
.nav-tabs > li.active.tab-lightred > a .glyphicon,
.nav-tabs > li.active.tab-lightred > a .typcn,
.nav-tabs > li.active.tab-lightred > a .wi {
  color: #e46f61;
}

.nav-tabs > li.active.tab-darkorange > a {
  border-color: #ed4e2a !important;
}

.nav-tabs > li.active.tab-darkorange > a > .fa,
.nav-tabs > li.active.tab-darkorange > a .glyphicon,
.nav-tabs > li.active.tab-darkorange > a .typcn,
.nav-tabs > li.active.tab-darkorange > a .wi {
  color: #ed4e2a;
}

.nav-tabs > li.active.tab-red > a {
  border-color: #df5138 !important;
}

.nav-tabs > li.active.tab-red > a > .fa,
.nav-tabs > li.active.tab-red > a .glyphicon,
.nav-tabs > li.active.tab-red > a .typcn,
.nav-tabs > li.active.tab-red > a .wi {
  color: #df5138;
}

.nav-tabs > li.active.tab-pink > a {
  border-color: #e75b8d !important;
}

.nav-tabs > li.active.tab-pink > a > .fa,
.nav-tabs > li.active.tab-pink > a .glyphicon,
.nav-tabs > li.active.tab-pink > a .typcn,
.nav-tabs > li.active.tab-pink > a .wi {
  color: #e75b8d;
}

.nav-tabs > li.active.tab-danger > a {
  border-color: #d73d32 !important;
}

.nav-tabs > li.active.tab-danger > a > .fa,
.nav-tabs > li.active.tab-danger > a .glyphicon,
.nav-tabs > li.active.tab-danger > a .typcn,
.nav-tabs > li.active.tab-danger > a .wi {
  color: #d73d32;
}

.nav-tabs > li.active.tab-magenta > a {
  border-color: #bc5679 !important;
}

.nav-tabs > li.active.tab-magenta > a > .fa,
.nav-tabs > li.active.tab-magenta > a .glyphicon,
.nav-tabs > li.active.tab-magenta > a .typcn,
.nav-tabs > li.active.tab-magenta > a .wi {
  color: #bc5679;
}

.nav-tabs > li.active.tab-purple > a {
  border-color: #7e3794 !important;
}

.nav-tabs > li.active.tab-purple > a > .fa,
.nav-tabs > li.active.tab-purple > a .glyphicon,
.nav-tabs > li.active.tab-purple > a .typcn,
.nav-tabs > li.active.tab-purple > a .wi {
  color: #7e3794;
}

.nav-tabs > li.active.tab-maroon > a {
  border-color: #981b48 !important;
}

.nav-tabs > li.active.tab-maroon > a > .fa,
.nav-tabs > li.active.tab-maroon > a .glyphicon,
.nav-tabs > li.active.tab-maroon > a .typcn,
.nav-tabs > li.active.tab-maroon > a .wi {
  color: #981b48;
}

/*Tabs */
.nav-tabs.nav-justified {
  /*border-bottom: 1px solid #eee;*/
  margin-bottom: 14px;
}

#content_wrapper .nav-tabs.nav-justified {
  display: flex;
}
@media screen and (min-width: 768px) {
  #content_wrapper .nav-tabs.nav-justified > li {
    display: inline-block;
    width: auto;
    min-width: 100px;
  }
}

#content_wrapper .student-canteen-nav .nav-tabs.nav-justified {
  display: flex;
  flex-wrap: wrap;
}

.nav-tabs.nav-justified > li > a {
  border: none;
  border: 1px solid #eee;
  height: auto;
  line-height: 1.1;
  background-color: transparent;
  padding: 15px 10px;
  position: relative;
  margin: 5px 2px 2px;
  white-space: nowrap;
}

.scrtabs-tabs-fixed-container ul.nav-tabs > li {
  position: relative;
  padding-bottom: 5px;
}

/*.scrtabs-tabs-fixed-container ul.nav-tabs>li:not(:last-child):before {
  content: "";
  left: 0;
  height: calc(100% - 15px);
  width: 1px;
  background: rgba($black_text, .1);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}*/
/*.nav-tabs.nav-justified > li > a:after {
  content: '';
  right: -3px;
  height: calc(100% - 5px);
  width: 6px;
  background: #ededed;
  bottom: 0;
  position: absolute;
  transform: rotate(-8deg)
}*/
.nav-tabs.nav-justified > li.active {
  border-bottom: 0 solid transparent;
  /*top: 3px;*/
}

/*.nav-tabs.nav-justified > li.active > a:after,
.nav-tabs.nav-justified > li.active > a:before {
  background-color: #eee;
  width: 2px;
}*/
.nav-tabs.nav-justified > li > a:hover {
  color: #000;
}

/*.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 0;
  color: $primary;
  box-shadow: none;
  border-top: 0 solid $primary;
  background-color: transparent;
}*/
/*.scrtabs-tab-container{*/
.nav-tabs.nav-justified > li > a {
  border-radius: 25px !important;
}

.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 0;
  color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  background-color: var(--main-color);
}

/*}*/
@media (max-width: 767px) {
  .nav-tabs.nav-justified > li > a {
    /*border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;*/
    margin: 10px;
  }

  .nav-tabs.nav-justified > li > a:before,
.nav-tabs.nav-justified > li > a:after {
    content: none;
  }
}
/*Tabs */
.nav-tabs .dropdown-menu {
  margin-top: -3px;
}

.nav-tabs.tabs-flat {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0);
}

.tabs-below > .nav-tabs {
  top: auto;
  margin-bottom: 0;
  margin-top: -1px;
  border-bottom-width: 0;
}

.tabs-below > .nav-tabs li.active > a,
.tabs-below > .nav-tabs li.active > a:hover,
.tabs-below > .nav-tabs li.active > a:focus {
  border-top-width: 1px;
  border-bottom: 2px solid #5db2ff;
  border-top-color: transparent;
  margin-top: 0;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
}

.tabs-below > .nav-tabs.nav-justified > li > a {
  margin-bottom: -2px;
}

.tabs-below > .nav-tabs.nav-justified > .active > a,
.tabs-below > .nav-tabs.nav-justified > .active > a:hover,
.tabs-below > .nav-tabs.nav-justified > .active > a:focus {
  border: 0;
  border-bottom: 2px solid #5db2ff;
}

.tabs-left > .nav-tabs {
  top: auto;
  margin-bottom: 0;
  float: right;
}

.tabs-left > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-left > .nav-tabs > li > a:focus,
.tabs-left > .nav-tabs > li > a:hover {
  margin: 0 -1px 0 0;
}

.tabs-left > .nav-tabs > li.active > a,
.tabs-left > .nav-tabs > li.active > a:focus,
.tabs-left > .nav-tabs > li.active > a:hover {
  border: 0;
  border-right: 2px solid #5db2ff;
  border-left-color: transparent;
  margin: 0 -1px 0 -1px;
  -webkit-box-shadow: -2px 0 3px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: -2px 0 3px 0 rgba(0, 0, 0, 0.3);
  box-shadow: -2px 0 3px 0 rgba(0, 0, 0, 0.3);
}

.tabs-right > .nav-tabs {
  top: auto;
  margin-bottom: 0;
  float: left;
}

.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-right > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a:focus,
.tabs-right > .nav-tabs > li > a:hover {
  border-top: 0;
  margin: 0 -1px;
}

.tabs-right > .nav-tabs > li.active > a,
.tabs-right > .nav-tabs > li.active > a:focus,
.tabs-right > .nav-tabs > li.active > a:hover {
  border-top-width: 0;
  border-left: 2px solid #5db2ff;
  border-right-color: transparent;
  margin: 0 -2px 0 -1px;
  -webkit-box-shadow: 2px 0 3px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 2px 0 3px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 2px 0 3px 0 rgba(0, 0, 0, 0.3);
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 60px;
}

.nav-tabs li [class*=" fa-"],
.nav-tabs li [class^=fa-] {
  width: 1.25em;
  display: inline-block;
  text-align: center;
}

.nav-tabs > li.open .dropdown-toggle {
  background-color: #e5e5e5;
  border-color: #e5e5e5;
}

.tabs-left .tab-content,
.tabs-right .tab-content {
  overflow: auto;
}

.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus {
  background-color: #fbfbfb;
}

.nav .dropdown-menu > .active > a,
.nav .dropdown-menu > .active > a:hover,
.nav .dropdown-menu > .active > a:focus {
  color: #262626;
  background-color: #e5e5e5;
}

.nav-tabs > li:not(.active):not(.open) > a:not(:hover) > [class*=fa-].disabled:first-child {
  color: #909090 !important;
}

.dashboard-box:not(.tabed-box) .nav-tabs li:before {
  width: 0;
}

.dashboard-box .nav-tabs.nav-justified > li.active {
  top: auto;
}

.dashboard-block .nav-tabs {
  outline: 0 !important;
  border-bottom: 0;
}

.browse-content-nav-tabs .nav-tabs.nav-justified > li:not(.active) > a {
  background: #fff;
}

.well {
  box-shadow: none;
}

.mailBoxSideMenu li {
  transition: all ease-in 0.3s;
  list-style: none;
  border-radius: 3px;
  margin-top: 4px;
  display: flex;
  align-items: center;
}

.mailBoxSideMenu li.active, .mailBoxSideMenu li:hover {
  background: var(--main-color);
}

.mailBoxSideMenu li.compose {
  margin: 30px auto;
}

.mailBoxSideMenu li.compaseForm i {
  color: #fff;
}

.mailBoxSideMenu li.compose button {
  padding: 10px 11px;
  border-radius: 20px;
  max-width: 100%;
  white-space: break-spaces;
}

.mailBoxSideMenu li i {
  color: var(--main-color);
  font-size: 16px;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  margin: 0 6px;
}

.mailBoxSideMenu li.active i, .mailBoxSideMenu li:hover i {
  color: #ffffff;
}

.mailBoxSideMenu li.compose button i {
  margin: 0 3px;
  font-size: 14px;
  vertical-align: middle;
  color: #fff;
}

.mailBoxSideMenu li.compose.active, .mailBoxSideMenu li.compose:hover {
  background: transparent;
}

.mailBoxSideMenu li a {
  color: #76828E;
  display: inline-block;
  padding: 10px 5px;
  background-color: transparent;
}

.mailBoxSideMenu li.active a, .mailBoxSideMenu li:hover a {
  color: #fff;
}

.mailBoxSideMenu li a:hover, .mailBoxSideMenu li a:focus {
  text-decoration: none;
}

.mailBoxSideMenu li.compose a {
  color: #fff;
  padding: 0;
  width: auto;
}

.mailBoxSideMenu li.compose button:hover {
  background: #fff !important;
  border: 1px solid var(--main-color) !important;
}

.mailBoxSideMenu li.compose button:hover a, .mailBoxSideMenu li.compose button:hover i {
  color: var(--main-color);
}

.mailBoxSideMenu .btn-info[disabled] {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
}

.mailBoxSideMenu .btn-info, .mailBoxSideMenu .btn-info:focus {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
}

.mailBoxSideMenu input[type=checkbox].checkbox-slider.colored-blue ~ .text:after {
  border-color: var(--main-color);
}

.mailBoxSideMenu input[type=checkbox].checkbox-slider.colored-blue:checked ~ .text:before, .mailBoxSideMenu input[type=checkbox].checkbox-slider.colored-blue:checked ~ .text:after {
  background-color: var(--main-color);
  border-color: #fff;
}

.mailBoxSideMenu input[type=checkbox].colored-blue:checked ~ .text {
  color: var(--main-color);
}

.mailBoxSideMenu {
  min-width: 150px;
}

@media screen and (max-width: 1315px) {
  .mailBoxSideMenu {
    width: 100%;
  }

  .mailBoxSideMenu ul {
    width: 100%;
    padding: 5px;
  }

  .mailBoxSideMenu li {
    /*min-width: 110px;*/
    margin: 10px 0 !important;
    display: inline-block;
  }

  .col-md-10.messages {
    width: 100%;
  }
}
.inbox_view_wrapper .complete {
  padding-right: 90px;
  position: relative;
}
.inbox_view_wrapper .complete:before {
  content: "";
  position: absolute;
  transform: translateX(-50%);
  top: -40px;
  right: 47px;
  height: 100%;
  width: 3px;
  background: #eee;
}
.inbox_view_wrapper .complete:after {
  font-family: "FontAwesome";
  content: "\f0e6";
  position: absolute;
  bottom: 8px;
  right: 30px;
  font-size: 2.5em;
  color: #eee;
}
.inbox_view_wrapper .complete .message_body {
  background: #fafafa;
  border: 0;
}
.inbox_view_wrapper .complete .message_body .replay_toggle {
  mix-blend-mode: multiply;
}
.inbox_view_wrapper .complete .message_body .reply_img_box {
  position: absolute;
  right: 16px;
  width: 60px;
}
.inbox_view_wrapper .complete .message_body .reply_img_box img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
@media screen and (max-width: 550px) {
  .inbox_view_wrapper .complete {
    padding-right: 60px;
  }
  .inbox_view_wrapper .complete:before {
    right: 38px;
  }
  .inbox_view_wrapper .complete:after {
    right: 20px;
    font-size: 2.5em;
  }
  .inbox_view_wrapper .complete .message_body .reply_img_box {
    right: 13px;
    width: 50px;
  }
  .inbox_view_wrapper .complete .message_body .reply_img_box img {
    width: 50px;
    height: 50px;
  }
  .inbox_view_wrapper .complete .sent_date {
    white-space: nowrap;
    margin: 10px 3px;
    display: inline-block;
  }
}

#public-profile-container {
  /*.timeline-progress {
      background-size: 400px 9px
  }

  .timeline-point {
      background: url(../../img/public_profiles/progress-point.png) center center;
      background-size: 400px 500px
  }

  .timeline-education {
      background: url(../../img/public_profiles/progress-education4.png) no-repeat center center;
      background-size: 400px 500px
  }

  .timeline-work {
      background: url(../../img/public_profiles/progress-work3.png) no-repeat center center;
      background-size: 400px 500px
  }

  .timeline-mail {
      background: url(../../img/public_profiles/progress-mail3.png) no-repeat center center;
      background-size: 400px 500px
  }

  .timeline-title {
      background: url(../../img/public_profiles/progress-section-title3.png) no-repeat center center;
      background-size: 400px 500px
  }

  .eportfolio-title {
      background: url(../../img/public_profiles/progress-section-title4.png) no-repeat center center;
      background-size: 400px 500px;
  }
  */
}
#public-profile-container .color1 {
  color: #444;
}
#public-profile-container .color2 {
  color: #3b658a;
}
#public-profile-container .color3 {
  color: #ce5f5f;
}
#public-profile-container .font1 {
  font-family: "Open Sans", sans-serif;
}
#public-profile-container .bold {
  font-weight: 700;
}
#public-profile-container .bg-cover {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#public-profile-container ul {
  margin: 0;
  padding: 0;
}
#public-profile-container hr {
  border: 0;
}
#public-profile-container h1,
#public-profile-container h2 {
  color: var(--main-color);
  margin-top: 0;
}
#public-profile-container h3 {
  color: #3b658a;
}
#public-profile-container .btn {
  margin-left: 3px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  height: 30px;
  line-height: 30px;
  padding-top: 0;
}
#public-profile-container .btn:hover .btn-hide-text {
  width: 125px;
  padding-right: 6px;
}
#public-profile-container .btn-top-message:hover .btn-hide-text {
  width: 105px;
  padding-right: 6px;
}
#public-profile-container .btn-darkblue {
  border: var(--main-color);
  border: 1px solid var(--main-color);
}
#public-profile-container .btn-darkblue:hover {
  background: var(--main-color) !important;
  color: #fafafa !important;
}
#public-profile-container .btn-darkblue:hover i {
  color: #fff;
}
#public-profile-container .btn-primary {
  background: var(--main-color);
  border: var(--main-color);
  color: #fafafa;
}
#public-profile-container .btn-primary:hover {
  background: #138880 !important;
  color: #fafafa;
}
#public-profile-container .btn-secondary {
  background: #ce5f5f;
  border: #ce5f5f;
  color: #fafafa;
}
#public-profile-container .btn-secondary:hover {
  background: #bd4e4e !important;
  color: #fafafa;
}
#public-profile-container .btn-hide-text {
  display: inline-block;
  width: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-align: right;
  line-height: 30px;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 10px !important;
}
#public-profile-container .nicescroll-rails {
  z-index: 9999 !important;
}
#public-profile-container .line-content {
  opacity: 1;
}
#public-profile-container p {
  color: #444;
  word-break: break-word;
}
#public-profile-container .profile-intro p {
  font-size: 16px !important;
  text-align: center;
}
#public-profile-container .intro-title1 {
  font-size: 26px !important;
  color: #444;
  letter-spacing: -1pt;
  border-bottom: 1px solid #cacaca;
  padding-bottom: 10px;
  font-weight: 200;
  margin-top: 15px;
  text-align: center;
  font-size: 20px;
}
#public-profile-container .intro-title2 {
  font-size: 16px !important;
  color: #444;
  margin-top: 5px;
  margin-bottom: 0;
  text-align: right;
  font-weight: 500 !important;
  line-height: 1.5;
}
#public-profile-container .section-title {
  text-transform: uppercase;
  color: #444;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 40px;
  padding-bottom: 20px;
}
#public-profile-container .section-item-title-1 {
  color: #444;
  border-bottom: 1px solid #aeaeae;
  padding-bottom: 5px;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 14px !important;
  margin-top: 14px;
  word-break: break-all;
}
#public-profile-container .section-item-title-1 .at {
  text-transform: lowercase;
  color: #444;
  font-weight: 400;
}
#public-profile-container #page-loader {
  width: 100%;
  height: 100%;
  background: #2a5479;
  color: #249991;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}
#public-profile-container .loading-wrapper {
  width: 250px;
  position: fixed;
  top: 40%;
  right: 50%;
  margin-right: -125px;
}
#public-profile-container .tp-loader {
  z-index: 10000;
  position: relative;
}
#public-profile-container .tp-loader.spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 10px;
  background-color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
  -webkit-animation: tp-rotateplane 1.2s infinite ease-in-out;
  animation: tp-rotateplane 1.2s infinite ease-in-out;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
@-webkit-keyframes tp-rotateplane {
  0% {
    -webkit-transform: perspective(120px);
  }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
  }
}
@keyframes tp-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
}
#public-profile-container .top-colors {
  padding: 0 !important;
}
#public-profile-container .top-color {
  height: 8px;
  width: 20%;
  float: right;
  background: #249991;
}
#public-profile-container .top-color1 {
  background: #249991;
}
#public-profile-container .top-color2 {
  background: #3b658a;
}
#public-profile-container .top-color3 {
  background: #ce5f5f;
}
#public-profile-container .side-menu-open {
  position: fixed;
  right: 0;
  height: 100%;
  cursor: pointer;
  z-index: 777;
}
#public-profile-container .side-menu-button {
  font-weight: 700;
  display: block;
  top: 80px;
  margin-top: 40px;
  height: 60px;
  line-height: 60px;
  padding-right: 20px;
  padding-left: 20px;
  background: #333;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  opacity: 0.9;
}
#public-profile-container .side-menu {
  position: fixed;
  top: 0;
  right: -250px;
  width: 250px;
  height: 100%;
  background: #111;
  color: #fafafa;
  padding: 60px 22px;
  z-index: 888;
  opacity: 0.9;
}
#public-profile-container .side-menu a,
#public-profile-container .side-menu p {
  color: #fafafa;
}
#public-profile-container .side-menu-nav {
  list-style: none;
  width: 100%;
  margin-bottom: 45px;
}
#public-profile-container .side-menu-nav li {
  display: block;
  width: 100%;
  font-size: 14px !important;
  border-bottom: 1px dotted #616161;
  background: none !important;
}
#public-profile-container .side-menu-nav li a {
  color: #d8d8d8;
  background: none !important;
  display: block;
  width: 100%;
  font-weight: 200;
  height: 35px;
  line-height: 35px;
  padding: 0 !important;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#public-profile-container .side-menu-nav li a:hover {
  padding-right: 5px !important;
  color: #fff;
  font-weight: 300;
  text-decoration: none;
}
#public-profile-container .side-menu-nav li.active a {
  padding-right: 5px !important;
  color: #fff;
  font-weight: 300;
  text-decoration: none;
  background: none !important;
}
#public-profile-container .nav > li > a {
  padding: 0;
}
#public-profile-container .nav > li > a:hover {
  background: 0 0;
}
#public-profile-container .side-menu-name {
  border: 2px solid #fafafa;
  color: #fafafa;
  opacity: 0.9;
  text-align: center;
  font-size: 22px !important;
  text-transform: uppercase;
  padding: 8px 2px;
  font-weight: 200;
}
#public-profile-container .side-menu-job {
  margin-bottom: 40px;
  text-align: center;
  font-weight: 200;
  font-size: 12px !important;
  margin-top: 5px;
  color: #d8d8d8;
}
#public-profile-container #side-menu-close {
  font-size: 18px !important;
  color: #fff;
  opacity: 0.5;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: absolute;
  left: 8px;
  top: 3px;
  cursor: pointer;
}
#public-profile-container #side-menu-close:hover {
  opacity: 1;
}
#public-profile-container .btn-side-menu {
  display: block;
  width: 100%;
  text-align: center;
  background: 0 0;
  border: 1px solid #fff;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  height: 40px;
  line-height: 40px;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 200;
  font-size: 10px !important;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#public-profile-container .btn-side-menu:hover {
  background: #fff;
  opacity: 0.8;
}
#public-profile-container #content-body {
  margin-top: 0px;
  margin-bottom: 10px;
  position: relative;
}
@media (min-width: 992px) {
  #public-profile-container #content-body {
    margin-top: 0px;
    margin-bottom: 90px;
  }
}
@media (min-width: 1200px) {
  #public-profile-container #content-body {
    margin-bottom: 200px;
  }
}
#public-profile-container .header-buttons {
  text-align: left;
  padding-top: 15px;
}
#public-profile-container .profile-intro {
  position: relative;
  z-index: 99;
  padding: 0 20px;
  width: 50%;
  margin-top: 0 !important;
}
#public-profile-container .profile-pic {
  text-align: center;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 3px solid var(--main-color);
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 140px;
  height: 140px;
  display: inline-block;
  vertical-align: middle;
}
#public-profile-container .profile-intro .intro-title1 {
  display: inline-block;
}
@media (max-width: 992px) {
  #public-profile-container .profile-pic {
    width: 130px;
    height: 130px;
  }
}
#public-profile-container .profile-pic img {
  width: 100%;
  height: 100%;
  margin-top: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: block;
}
#public-profile-container .timeline-wrap {
  /*background: #fff;*/
  position: relative;
  z-index: 88;
}
#public-profile-container .timeline-margin .content-wrap {
  height: 40px;
}
@media (min-width: 992px) {
  #public-profile-container .timeline-margin .content-wrap {
    height: 80px;
  }
}
@media (min-width: 992px) {
  #public-profile-container .timeline-margin-big .content-wrap {
    height: 260px;
  }
}
#public-profile-container .line-content {
  color: #444;
  font-size: 16px !important;
}
#public-profile-container .line-content p {
  font-size: 14px !important;
  word-break: break-all;
}
#public-profile-container .line-content-education {
  padding-bottom: 10px;
}
@media (min-width: 992px) {
  #public-profile-container .line-content-education {
    min-height: 100px;
  }
}
#public-profile-container .graduation-time,
#public-profile-container .job {
  font-size: 14px !important;
  font-weight: 700;
  color: #999;
}
#public-profile-container .graduation-date,
#public-profile-container .job-date {
  font-size: 14px !important;
  font-style: italic;
  font-weight: 200;
}
#public-profile-container .timeline-post-date {
  float: left;
  margin-left: 10px;
  text-align: left;
}
#public-profile-container .graduation-description,
#public-profile-container .job-description {
  font-size: 13px !important;
}
#public-profile-container .graduation-description p,
#public-profile-container .job-description p {
  font-size: 13px !important;
  line-height: 19px;
}
#public-profile-container .progress {
  position: relative;
  height: 25px;
  background: #ddd;
}
#public-profile-container .progress > .progress-type {
  position: absolute;
  right: 0;
  font-size: 13px !important;
  padding: 3px 30px 2px 10px;
  color: #fff;
}
#public-profile-container .progress > .progress-completed {
  position: absolute;
  left: 0;
  font-weight: 800;
  padding: 3px 10px 2px;
  color: #999;
  font-size: 14px !important;
}
#public-profile-container .skills-list {
  list-style: none;
}
#public-profile-container .progress-bar {
  background: #4DB6AC;
  width: 20%;
}
#public-profile-container .progress-bar-2 {
  background: var(--main-color);
}
#public-profile-container .progress-bar-3 {
  background: #ce5f5f;
}
#public-profile-container .portfolio .line-content {
  height: 255px;
}
#public-profile-container .portfolio-item {
  position: relative;
  cursor: crosshair !important;
  width: 200px;
  height: 180px;
  overflow: hidden;
  background: 0 0;
}
#public-profile-container .portfolio-item:hover img {
  -webkit-transform: scale(1.2) rotate(-5deg);
  -o-transform: scale(1.2) rotate(-5deg);
  transform: scale(1.2) rotate(-5deg);
}
#public-profile-container .portfolio-item a {
  background: 0 0;
  display: block;
  cursor: crosshair !important;
}
#public-profile-container .portfolio-item img {
  width: 100%;
  border-radius: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#public-profile-container .portfolio-item .hover-bg-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  z-index: 3;
  display: none;
}
#public-profile-container .portfolio-item .hover-bg {
  background: #02776f;
  opacity: 0.9;
  width: 100%;
  height: 100%;
  position: relative;
  min-height: 10px;
  z-index: 3;
}
#public-profile-container .portfolio-item .hover {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 4;
  color: #fff;
  opacity: 1;
  display: none;
  padding: 20px;
}
#public-profile-container .portfolio-item .hover p {
  color: #fff;
  text-align: center;
}
#public-profile-container .portfolio-item .hover p.zoomi {
  font-size: 56px !important;
}
#public-profile-container .portfolio-item .hover p.portfolio-item-title {
  font-size: 12px !important;
  text-transform: uppercase;
  padding-right: 5px;
  padding-left: 5px;
  margin-top: 8px;
  font-weight: 200;
}
#public-profile-container .bx-controls-direction {
  margin-top: 5px;
}
#public-profile-container .bx-controls-direction .disabled {
  opacity: 0.3;
  cursor: default;
  background: #333;
}
#public-profile-container .bx-controls-direction .disabled:hover {
  background: #333;
}
#public-profile-container .bx-next,
#public-profile-container .bx-prev {
  display: inline-block;
  height: 30px;
  width: 40px;
  background: #3b658a;
  color: #fafafa;
  text-align: center;
  line-height: 30px;
  margin-left: 3px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#public-profile-container .bx-next:hover,
#public-profile-container .bx-prev:hover {
  color: #fff;
  background: #083257;
}
#public-profile-container .contact-content {
  padding-bottom: 20px;
  min-height: 315px;
}
#public-profile-container .contact-form-wrapper {
  position: relative;
}
#public-profile-container .form-group {
  margin-bottom: 10px;
  position: relative;
}
#public-profile-container .form-group label.error {
  display: block;
  position: absolute;
  left: -10px;
  top: -3px;
  background: #333;
  padding: 5px;
  color: #fff;
  font-weight: 400;
  font-size: 12px !important;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
#public-profile-container input.form-control,
#public-profile-container textarea.form-control {
  background: #249991;
  border: 0 solid #35aaa2;
  padding-top: -2px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  color: #fff;
  height: 40px;
}
#public-profile-container textarea.form-control {
  width: 100% !important;
  height: 100px !important;
}
#public-profile-container .form-send {
  margin-top: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  min-width: 200px;
  background: #3b658a;
  color: #fff;
  display: block;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#public-profile-container ::-webkit-input-placeholder {
  color: #fafafa !important;
  font-style: italic;
}
#public-profile-container :-moz-placeholder {
  color: #fafafa !important;
  font-style: italic;
}
#public-profile-container ::-moz-placeholder {
  color: #fafafa !important;
  font-style: italic;
}
#public-profile-container :-ms-input-placeholder {
  color: #fafafa !important;
  font-style: italic;
}
#public-profile-container .contact-subtitle-1 {
  text-transform: uppercase;
  font-weight: 700;
  color: #3b658a;
  font-size: 18px !important;
  margin-bottom: 4px;
  margin-top: 20px;
}
@media (min-width: 992px) {
  #public-profile-container .contact-subtitle-1 {
    font-size: 14px !important;
    margin-top: 0;
  }
}
#public-profile-container .contact-infos {
  text-align: center;
  margin-top: 20px;
  font-size: 16px !important;
}
#public-profile-container .contact-infos p {
  font-size: 16px !important;
}
#public-profile-container .modal-wrap {
  display: none;
}
#public-profile-container .modal-bg {
  background: #333;
  opacity: 0.9;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
#public-profile-container .modal-content {
  background: #fafafa;
  font-size: 18px !important;
  position: fixed;
  top: 40%;
  right: 50%;
  margin-right: -125px;
  width: 250px;
  z-index: 9999;
  padding: 10px 20px;
}
#public-profile-container .modal-content .modal-title {
  color: #3b658a;
  font-size: 22px !important;
  border-bottom: 1px solid #ccc;
  margin-bottom: 5px;
  font-weight: 700;
}
#public-profile-container .modal-content p {
  font-size: 14px !important;
  margin-bottom: 0;
}
#public-profile-container #contactError .modal-title {
  color: #fff;
}
#public-profile-container .line-thank-you {
  height: 90px;
}
#public-profile-container .thank-you {
  font-weight: 200;
  font-size: 67px !important;
  line-height: 48px;
  color: #aaa;
  font-style: italic;
  position: relative;
  top: -5px;
  text-align: center;
}
#public-profile-container #footer {
  background: #249991;
  color: #fff;
  padding-top: 17px;
  padding-bottom: 17px;
  text-align: center;
  margin-top: 130px;
}
#public-profile-container #footer p {
  color: #fff;
}
#public-profile-container #footer .quote {
  font-size: 22px !important;
  font-weight: 200;
  margin-bottom: 5px;
}
#public-profile-container #footer .author {
  font-size: 14px !important;
  font-weight: 700;
}
#public-profile-container .nivo-lightbox-theme-default .nivo-lightbox-title {
  font-style: normal;
  font-weight: 400;
  background: #000;
  opacity: 0.9;
  color: #fff;
  padding: 15px;
  border-radius: 5px;
  width: 100%;
}
#public-profile-container .nivo-lightbox-theme-default .nivo-lightbox-title-wrap {
  bottom: 0;
}
#public-profile-container .safari .btn {
  display: inline;
  padding-top: 5px;
}
#public-profile-container .safari .side-menu-button {
  display: block;
}
#public-profile-container .safari .form-send {
  padding-top: 0 !important;
  margin: 0 auto;
}
#public-profile-container .safari .btn-side-menu {
  display: block;
  -webkit-transition: all 0s ease-in-out;
  -moz-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out;
  padding-top: 0;
  opacity: 1;
}
#public-profile-container .mac.gecko .full-height {
  border-right: 1px solid #fafafa;
}
#public-profile-container .mac.gecko #skills .line-content {
  min-height: 170px;
}
#public-profile-container .mac.gecko #portfolio .line-content {
  height: 280px;
}
#public-profile-container .publicProfilParentBox {
  position: relative;
  margin: 0 -15px;
}
#public-profile-container .publicProfilParentBox:before {
  content: "";
  width: 2px;
  height: 97%;
  position: absolute;
  background: #ddd;
  right: 50%;
  top: 15px;
}
#public-profile-container .sectionBox {
  padding: 10px 15px;
  background: #fff;
}
#public-profile-container .sectionBox i {
  color: var(--main-color);
  margin: 0 10px;
  font-size: 17px;
}
#public-profile-container .intro-title2 a {
  color: var(--main-color);
}
#public-profile-container .intro-title2 a:hover {
  color: rgba(var(--main-color-rgb), 90%);
}
#public-profile-container .profileBoxChild, #public-profile-container .profile-intro #progressWrap {
  background: #fff;
  border: 1px solid #eee;
  padding: 10px;
  margin: 0 auto;
  position: relative;
  break-inside: avoid;
  grid-column: auto;
}
#public-profile-container .profileBox {
  margin: 12px 0;
  border-radius: 5px;
  padding: 0px 20px;
  width: 50%;
  float: right;
  position: relative;
}
#public-profile-container .profile-intro .profileBoxChild, #public-profile-container .profile-intro #progressWrap {
  margin: 8px 0;
}
@media (min-width: 768px) {
  #public-profile-container .intro-title1 {
    font-size: 30px !important;
    padding: 20px;
  }
  #public-profile-container .profile-intro p {
    text-align: right;
    font-size: 14px !important;
  }
  #public-profile-container .intro-title2 {
    padding: 7px;
    line-height: 32px;
  }
}
@media (min-width: 992px) {
  #public-profile-container .thank-you {
    text-align: right;
  }
  #public-profile-container .contact-infos {
    text-align: right;
    margin-top: 0;
    font-size: 14px !important;
  }
}
#public-profile-container .eportfoliosProfile .intro-title1 .color1,
#public-profile-container .eportfoliosProfile .intro-title2 {
  color: #444;
}
#public-profile-container .eportfoliosProfile .intro-title1 {
  text-align: right;
}
#public-profile-container .eportfoliosProfile .profile-pic {
  transform: rotate(0deg);
  right: 0;
}
#public-profile-container #progressWrap .progress-bar {
  background: linear-gradient(90deg, #5B86E5 0%, var(--main-color) 100%);
  padding-top: 4px;
}
#public-profile-container #progressWrap .notCompleted h4 {
  font-weight: bold !important;
  font-size: 17px !important;
  color: #777;
}
#public-profile-container #progressWrap .notCompleted li {
  list-style: none;
  display: inline-block;
  margin: 5px;
  padding: 5px;
  border: 1px solid #bbb;
  border-radius: 7px;
  color: #999;
}
#public-profile-container #progressWrap {
  padding: 10px 0;
  margin: 20px 0;
  display: none;
}
#public-profile-container #progressWrap .progress {
  margin-top: 20px;
}
#public-profile-container .rateBox {
  padding: 10px;
  border-radius: 7px;
  transition: ease all 0.3s;
}
#public-profile-container .rateBox span {
  color: #cacaca;
  margin: 0 10px;
}
#public-profile-container .rateHover .starsBox span:hover, #public-profile-container .rateHover .starsBox span:hover ~ span, #public-profile-container .rateBox .starYellow, #public-profile-container .rateBox .starYellow ~ span {
  color: var(--main-color);
}
#public-profile-container .rateBox .starsBox {
  display: flex;
  font-size: 2em;
  padding-right: 7px;
  flex-direction: row-reverse;
  float: right;
}
@media (max-width: 337px) {
  #public-profile-container .rateBox span {
    margin: 0 5px;
  }
}
#public-profile-container .timeline-progress .btn-load-more-data {
  min-width: 110px;
  background: var(--main-color) !important;
}
#public-profile-container .profile-intro .intro-title1, #public-profile-container .eportfoliosProfile .intro-title1 {
  display: inline-block;
  width: calc(100% - 180px);
  text-align: center;
  color: #444;
  border: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  vertical-align: top;
}
#public-profile-container #load-more-data-line {
  margin: 20px 0;
}
#public-profile-container .profileBox[data-box-type]:after {
  content: "\f044";
  position: absolute;
  width: 25px;
  height: 25px;
  background: var(--main-color);
  border-radius: 50%;
  font-family: FontAwesome;
  text-align: center;
  color: #fff;
  padding-top: 4px;
}
#public-profile-container .profileBox[data-box-type]:after {
  left: -10px;
  top: 30px;
  border-bottom-right-radius: 0;
}
#public-profile-container .leftPos.profileBox[data-box-type]:after {
  right: -14px;
  top: 0;
  left: auto;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 0;
}
#public-profile-container .profileBox[data-box-type="Read Attachment"]:after {
  content: "\f0c6";
  background: #7986CB;
}
#public-profile-container .profileBox[data-box-type=Submission]:after {
  content: "\f00c";
  background: #F06292;
}
#public-profile-container .ppOfflineMessage {
  float: left;
  width: 97%;
  margin: 20px;
  background: #fff;
  padding: 24px;
  border-top: 2px solid var(--main-color);
}
#public-profile-container .ppOfflineMessage i {
  font-size: 7em;
  display: block;
  text-align: center;
  margin-bottom: 35px;
  color: var(--main-color);
}
#public-profile-container .leftPos.profileBox[data-box-type] {
  margin-top: 0;
}
#public-profile-container .currentUser#timeline-posts .profileBox:nth-child(-n+4), #public-profile-container .visitor#timeline-posts .profileBox:nth-child(-n+3) {
  margin-top: 15px;
}
@media screen and (max-width: 1395px) {
  #public-profile-container .profileBox, #public-profile-container .ppOfflineMessage {
    width: 100%;
    padding: 0 30px;
  }
  #public-profile-container .profileBox[data-box-type]:after {
    right: -5px !important;
    left: auto !important;
    bottom: auto !important;
    top: 10px;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 50% !important;
  }
  #public-profile-container .publicProfilParentBox:before {
    right: 5px;
  }
  #public-profile-container .profileBox[data-box-type]:nth-of-type(even) {
    margin-top: 15px;
  }
}
#public-profile-container .eportfoliosProfile .profileBoxChild {
  /*background: transparent;*/
  border: 0;
}
#public-profile-container .eportfoliosProfile .ePortfoliosInfo {
  /*  background: $sidemenu_bg;
    border: 1px solid $bg_e;
    border-top: 2px solid $primary;*/
  border: 0;
}
#public-profile-container .ePortfoliosTopSection {
  border: 1px solid #eee;
  border-top: 2px solid var(--main-color);
  background: #fff;
  margin-bottom: 10px;
  padding: 10px 15px;
}
#public-profile-container .btn.btn-labeled {
  overflow: hidden;
}
#public-profile-container .profile-intro .intro-title1 span {
  font-size: 20px;
  display: block;
  word-break: break-word;
}
#public-profile-container .profile-intro .intro-title1 .schoolName, #public-profile-container .eportfoliosProfile .intro-title1 .schoolName {
  font-size: 13px;
  color: #777;
  text-transform: capitalize;
  margin-top: 10px;
}
#public-profile-container .intro-title1 .schoolName a {
  color: #777;
  margin-top: 10px;
  display: block;
}
#public-profile-container .profile-intro #progressWrap {
  min-height: 190px;
}
#public-profile-container #progressWrap .notCompleted ul {
  height: 40px;
}
#public-profile-container #progressWrap .notCompleted.opend ul {
  height: auto;
}
#public-profile-container #progressWrap .notCompleted.opend .more, #public-profile-container #progressWrap .notCompleted .less, #public-profile-container #progressWrap .notCompleted .notAppear {
  display: none;
}
#public-profile-container #progressWrap .notCompleted.opend .less {
  display: inline-block;
}
#public-profile-container #progressWrap .notCompleted.opend .notAppear {
  display: inline-block;
}
#public-profile-container .line-thank-you h3 {
  color: #444;
  font-size: 16px;
  text-align: center;
}
#public-profile-container .line-thank-you h3 span {
  color: var(--main-color);
  font-size: 15px;
  margin: 0 10px;
}
#public-profile-container .line-thank-you h3 i {
  display: inline-block;
  font-size: 22px;
  color: var(--main-color);
  margin: 0 13px;
}
#public-profile-container #load-more-data-line {
  margin-top: 20px;
}
#public-profile-container .navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area section h2 span {
  font-size: 18px;
  line-height: 34px;
}
#public-profile-container .navbar .navbar .account-area.public-profile-class .btn {
  font-size: 11px;
  color: var(--main-color);
  background: #fff;
  box-shadow: none !important;
  border: 0;
  padding: 14px 10px;
  line-height: 0;
}
#public-profile-container .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .dropdown-menu li {
  min-height: auto;
}
#public-profile-container .navbar .navbar-inner .navbar-header .navbar-account .account-area .login-area section {
  display: block !important;
}
@media screen and (max-width: 540px) {
  #public-profile-container .navbar .navbar-inner .navbar-header .navbar-account .public-profile-class.account-area {
    left: 10px !important;
    right: auto;
    bottom: 8px;
    top: auto !important;
    width: 200px;
    position: relative;
  }
  #public-profile-container .navbar .navbar-inner .navbar-header .navbar-account .account-area > li {
    top: 0;
    margin-top: 0 !important;
    left: 0;
  }
  #public-profile-container .navbar .navbar-inner, #public-profile-container .navbar .navbar-inner .navbar-header .navbar-account {
    width: 100%;
    text-align: left;
  }
  #public-profile-container .profile-intro #progressWrap {
    min-height: 230px;
  }
  #public-profile-container .profile-pic {
    width: 80px;
    height: 80px;
  }
  #public-profile-container .profile-intro .intro-title1 span {
    font-size: 15px;
  }
  #public-profile-container .intro-title1 .schoolName a {
    font-size: 11px;
  }
  #public-profile-container .profile-intro .intro-title1, #public-profile-container .eportfoliosProfile .intro-title1 {
    width: calc(100% - 90px);
  }
  #public-profile-container .timeline-post-date {
    font-size: 12px;
    margin: 10px 0;
    color: #b5b4b4;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 11px;
  }
}
#public-profile-container .profile-intro.profile-intro-school {
  width: 100%;
  background: #fff;
}
#public-profile-container .profile-intro.profile-intro-school .intro-title1 {
  text-align: -webkit-auto;
}
#public-profile-container .account-area .toggle-handle, #public-profile-container .account-area .toggle-group {
  top: -2px;
}
#public-profile-container .account-area #walkthrough_button_div .toggle.btn-xs {
  height: 22px !important;
}
#public-profile-container .account-area #walkthrough_button_div {
  height: 36px;
  padding-top: 3px;
}
#public-profile-container .account-area .btn.btn-labeled .btn-label {
  padding: 10px 11px 8px 10px;
}
#public-profile-container .navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a.wave.in {
  display: none;
}
#public-profile-container .ppOfflineMessageError {
  float: none;
  width: 103%;
  margin: -10px;
}
#public-profile-container .publicProfilParentBoxInfo .sectionBox, #public-profile-container .publicProfilParentBoxInfo .aboutMe {
  background: #fff;
}

.ePortfolios-wrpper-box #main-wrap {
  width: 100%;
}

.timelineTitleBg {
  background: #fff;
  padding: 10px;
}
.timelineTitleBg h2 {
  margin-bottom: 0;
}

.royal_portfolio_box {
  margin: 0 auto;
  /* HTML5 display-role reset for older browsers */
  /*
  ***************************************************************
  * #General Styles & Classes
  ***************************************************************
  */
  /* correct box model */
  /*body {
  	overflow-x: hidden; 
  	opacity: 1 !important;
  }*/
  /* clearfix hack */
  /* "clear" inline-blocks */
  /* .rf- Refers to Royal Flush */
  /* Page's Main Content Wrapper */
  /* Inner Content Wrapper */
  /* ----------------- Wp Core Classes ----------------- */
  /* Shortcodes Ultimate Classes */
  /* ----------------- Visual Composer - adjustments ----------------- */
  /*
  ***************************************************************
  * #Mobile Logo & Navigation
  ***************************************************************
  */
  /*
  ***************************************************************
  * #Sidebar
  ***************************************************************
  */
  /* ----------------- Logo & Tagline ----------------- */
  /* ----------------- Page Sidebar Menu & Filters ----------------- */
  /* ----------------- Top Sidebar Menu & Filters ----------------- */
  /* ----------------- Fold Menu ----------------- */
  /* Fade */
  /* Center Grow */
  /* Top Left Grow */
  /* Top Right Grow */
  /* Bottom Left Grow */
  /* Bottom Right Grow */
  /* Top Slide */
  /* Bottom Slide */
  /* Left Slide */
  /* Right Slide */
  /* Skew Top */
  /* Skew Bottom */
  /* Skew Left */
  /* Skew Right */
  /* Skew Full Fade Top */
  /* Skew Full Fade Bottom */
  /* Skew Full Fade Left */
  /* Skew Full Fade Right */
  /* ----------------- PrettyScroll Plugin for Page Sidebar ----------------- */
  /*
  ***************************************************************
  * #Blog & Portfolio Pages
  ***************************************************************
  */
  /* ----------------- Post Media Block ----------------- */
  /* ----------------- Post Video & Audio Media ----------------- */
  /* ----------------- Post Text Block ----------------- */
  /*
  ***************************************************************
  * #Blog Page
  ***************************************************************
  */
  /* ----------------- Link & Qoute ----------------- */
  /* ----------------- Image Overlay ----------------- */
  /*
  ***************************************************************
  * #Portfolio Page
  ***************************************************************
  */
  /* Post Type Icon */
  /* ----------------- Post Decorational Triangle ----------------- */
  /* ----------------- Post Text Block ----------------- */
  /* ----------------- Image Overlay ----------------- */
  /* ----------------- Image Grayscale ----------------- */
  /*
  ***************************************************************
  * #Portfolio Post Info Hovers
  ***************************************************************
  */
  /* Fade In */
  /* Fade Out */
  /* Center Grow */
  /* Center Grow Full */
  /* Top Left Grow */
  /* Top Right Grow */
  /* Bottom Left Grow */
  /* Bottom Right Grow */
  /* Top Slide */
  /* Bottom Slide */
  /* Left Slide */
  /* Right Slide */
  /* Skew Top */
  /* Skew Bottom */
  /* Skew Left */
  /* Skew Right */
  /* Skew Full Top */
  /* Skew Full Bottom */
  /* Skew Full Left */
  /* Skew Full Right */
  /* Skew Full Fade Top */
  /* Skew Full Fade Bottom */
  /* Skew Full Fade Left */
  /* Skew Full Fade Right */
  /*
  ***************************************************************
  * #Blog & Portfolio Single
  ***************************************************************
  */
  /* ----------------- Header ----------------- */
  /* ----------------- Featured Media ----------------- */
  /* ----------------- Gallery Slideshow ----------------- */
  /* Lightbox Overlay */
  /* ----------------- WP Post Gallery ----------------- */
  /* ----------------- Single Post Sharing ----------------- */
  /* ----------------- adjustments ----------------- */
  /* ----------------- Post Content Pagination ----------------- */
  /* ----------------- Blog Tags ----------------- */
  /* ----------------- Content Markup ----------------- */
  /*
  ***************************************************************
  * #Portfolio Project Info
  ***************************************************************
  */
  /*
  ***************************************************************
  * #Similar Items
  ***************************************************************
  */
  /*
  ***************************************************************
  * #Image Overlay
  ***************************************************************
  */
  /*
  ***************************************************************
  * #Search Results Page
  ***************************************************************
  */
  /*
  ***************************************************************
  * #Pagination
  ***************************************************************
  */
  /*
  ***************************************************************
  * #Contact Page
  ***************************************************************
  */
  /* ----------------- Contact Info ----------------- */
  /* ----------------- Google Map ----------------- */
  /*
  ***************************************************************
  * #Inputs
  ***************************************************************
  */
  /* Search Form */
  /*
  ***************************************************************
  * #Comments
  ***************************************************************
  */
  /*
  ***************************************************************
  * #Sidebar, Top & Footer Widgets
  ***************************************************************
  */
  /* Calendar Widget*/
  /* Custom Menu Widget - sub menus */
  /*Select Dropdown*/
  /*Text Widget*/
  /*
  ***************************************************************
  * #Copyright & Socials
  ***************************************************************
  */
  /* ----------------- Fixed Fold Button ----------------- */
  /* ----------------- Social Icons ----------------- */
  /* ----------------- Back To Top Button ----------------- */
  /*
  ***************************************************************
  * #Body Classes
  * -These Classes are generated by theme customizer
  * -They help us create high level customizable layouts :)
  ***************************************************************
  */
}
.royal_portfolio_box html,
.royal_portfolio_box div,
.royal_portfolio_box span,
.royal_portfolio_box applet,
.royal_portfolio_box object,
.royal_portfolio_box iframe,
.royal_portfolio_box h1,
.royal_portfolio_box h2,
.royal_portfolio_box h3,
.royal_portfolio_box h4,
.royal_portfolio_box h5,
.royal_portfolio_box h6,
.royal_portfolio_box p,
.royal_portfolio_box blockquote,
.royal_portfolio_box pre,
.royal_portfolio_box a,
.royal_portfolio_box abbr,
.royal_portfolio_box acronym,
.royal_portfolio_box address,
.royal_portfolio_box big,
.royal_portfolio_box cite,
.royal_portfolio_box code,
.royal_portfolio_box del,
.royal_portfolio_box dfn,
.royal_portfolio_box em,
.royal_portfolio_box img,
.royal_portfolio_box ins,
.royal_portfolio_box kbd,
.royal_portfolio_box q,
.royal_portfolio_box s,
.royal_portfolio_box samp,
.royal_portfolio_box small,
.royal_portfolio_box strike,
.royal_portfolio_box strong,
.royal_portfolio_box sub,
.royal_portfolio_box sup,
.royal_portfolio_box tt,
.royal_portfolio_box var,
.royal_portfolio_box b,
.royal_portfolio_box u,
.royal_portfolio_box i,
.royal_portfolio_box center,
.royal_portfolio_box dl,
.royal_portfolio_box dt,
.royal_portfolio_box dd,
.royal_portfolio_box ol,
.royal_portfolio_box ul,
.royal_portfolio_box li,
.royal_portfolio_box fieldset,
.royal_portfolio_box form,
.royal_portfolio_box label,
.royal_portfolio_box legend,
.royal_portfolio_box table,
.royal_portfolio_box caption,
.royal_portfolio_box tbody,
.royal_portfolio_box tfoot,
.royal_portfolio_box thead,
.royal_portfolio_box tr,
.royal_portfolio_box th,
.royal_portfolio_box td,
.royal_portfolio_box article,
.royal_portfolio_box aside,
.royal_portfolio_box canvas,
.royal_portfolio_box details,
.royal_portfolio_box embed,
.royal_portfolio_box figure,
.royal_portfolio_box figcaption,
.royal_portfolio_box footer,
.royal_portfolio_box header,
.royal_portfolio_box hgroup,
.royal_portfolio_box menu,
.royal_portfolio_box nav,
.royal_portfolio_box output,
.royal_portfolio_box ruby,
.royal_portfolio_box section,
.royal_portfolio_box summary,
.royal_portfolio_box time,
.royal_portfolio_box mark,
.royal_portfolio_box audio,
.royal_portfolio_box video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  /*vertical-align: baseline;*/
}
.royal_portfolio_box article,
.royal_portfolio_box aside,
.royal_portfolio_box details,
.royal_portfolio_box figcaption,
.royal_portfolio_box figure,
.royal_portfolio_box footer,
.royal_portfolio_box header,
.royal_portfolio_box hgroup,
.royal_portfolio_box menu,
.royal_portfolio_box nav,
.royal_portfolio_box section {
  display: block;
}
.royal_portfolio_box body {
  line-height: 1.1;
}
.royal_portfolio_box ol,
.royal_portfolio_box ul {
  list-style: none;
}
.royal_portfolio_box blockquote,
.royal_portfolio_box q {
  quotes: none;
}
.royal_portfolio_box blockquote:before,
.royal_portfolio_box blockquote:after,
.royal_portfolio_box q:before,
.royal_portfolio_box q:after {
  content: "";
  content: none;
}
.royal_portfolio_box table {
  border-collapse: collapse;
  border-spacing: 0;
}
.royal_portfolio_box input, .royal_portfolio_box textarea {
  outline: 0;
}
.royal_portfolio_box *,
.royal_portfolio_box *:before,
.royal_portfolio_box *:after {
  box-sizing: border-box;
}
.royal_portfolio_box img,
.royal_portfolio_box iframe,
.royal_portfolio_box embed {
  max-width: 100%;
}
.royal_portfolio_box .single img,
.royal_portfolio_box .page img {
  height: auto;
}
.royal_portfolio_box a {
  text-decoration: none;
  -webkit-transition: color 0.2s ease 0s, background-color 0.3s ease 0s, border 0.3s ease 0s;
  transition: color 0.2s ease 0s, background-color 0.3s ease 0s, border 0.3s ease 0s;
}
.royal_portfolio_box strong {
  font-weight: bold;
}
.royal_portfolio_box em {
  font-style: italic;
}
.royal_portfolio_box .clearfix:before,
.royal_portfolio_box .clearfix:after {
  content: " ";
  display: block;
}
.royal_portfolio_box .clearfix:after {
  clear: both;
}
.royal_portfolio_box .clear {
  clear: both;
}
.royal_portfolio_box .clear-inline:before {
  content: " ";
  display: block;
}
.royal_portfolio_box .rf-button {
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: background-color 0.3s ease 0s, color 0.3s ease 0s, border 0.3s ease 0s;
  transition: background-color 0.3s ease 0s, color 0.3s ease 0s, border 0.3s ease 0s;
}
.royal_portfolio_box .rf-last-item {
  margin-right: 0 !important;
}
.royal_portfolio_box .rf-last-row {
  margin-bottom: 0 !important;
}
.royal_portfolio_box .fa-royal-slash:before {
  content: "⁄";
}
.royal_portfolio_box .fa-royal-vbar:before {
  content: "Ι";
}
.royal_portfolio_box .fa-royal-slash:before,
.royal_portfolio_box .fa-royal-vbar:before {
  font-family: Arial, "Roboto", sans-serif;
}
.royal_portfolio_box i.fa {
  letter-spacing: 0;
}
.royal_portfolio_box #main-wrap {
  width: auto;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: margin 0.1s ease 0s, opacity 0.5s ease 0s;
  transition: margin 0.1s ease 0s, opacity 0.5s ease 0s;
}
.royal_portfolio_box .inner-content-wrap {
  margin: 0 auto;
}
.royal_portfolio_box .alignnone {
  float: none;
}
.royal_portfolio_box .alignleft {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}
.royal_portfolio_box .alignright {
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}
.royal_portfolio_box .aligncenter {
  display: block;
  margin: 0px auto 15px auto !important;
}
.royal_portfolio_box .wp-caption {
  max-width: 100%;
  overflow: hidden;
}
.royal_portfolio_box .wp-caption-text {
  padding: 10px;
  text-align: center;
  font-size: 14px;
}
.royal_portfolio_box .center-text {
  text-align: center;
}
.royal_portfolio_box .sticky {
  /* Sticky Post styles goes here */
}
.royal_portfolio_box .inner-content .su-carousel .su-carousel-slide-title,
.royal_portfolio_box .inner-content .su-custom-gallery-slide span {
  padding: 10px;
}
.royal_portfolio_box .inner-content .su-frame-align-right {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}
.royal_portfolio_box .inner-content .su-frame-align-left {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}
.royal_portfolio_box .su-note,
.royal_portfolio_box .su-note-inner {
  border: 0 !important;
}
.royal_portfolio_box .su-lightbox {
  font-family: Arial, "Roboto", sans-serif;
}
.royal_portfolio_box .wpb_tabs_nav li,
.royal_portfolio_box .flex-control-nav li,
.royal_portfolio_box .vc_carousel-indicators li {
  padding: 3px !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
.royal_portfolio_box .wpb_flexslider.flexslider_fade {
  overflow: hidden;
}
.royal_portfolio_box .wpb_gallery .wpb_flexslider .flex-control-nav {
  bottom: -10px !important;
}
.royal_portfolio_box .flex-control-paging li a {
  width: 13px !important;
  height: 13px !important;
}
.royal_portfolio_box .flex-direction-nav a:before {
  font-size: 30px !important;
}
.royal_portfolio_box .wpb_image_grid .wpb_image_grid_ul img {
  max-width: 100% !important;
}
.royal_portfolio_box .wpb_accordion_header {
  outline: none;
}
.royal_portfolio_box .ui-accordion-header-icon {
  cursor: pointer;
}
.royal_portfolio_box .wpb_tab.ui-tabs-panel {
  padding: 15px !important;
}
.royal_portfolio_box .wpb_tour_next_prev_nav {
  display: none;
}
.royal_portfolio_box .vc_toggle_title h4 {
  font-weight: normal !important;
}
.royal_portfolio_box .wpb_pie_chart_heading {
  margin-top: 10px;
}
.royal_portfolio_box .m-nav-and-logo {
  display: none;
}
.royal_portfolio_box .m-nav-fold .fa {
  display: block;
  text-align: center;
}
.royal_portfolio_box .mobile-nav {
  display: none;
}
.royal_portfolio_box .mobile-nav li {
  text-align: center;
}
.royal_portfolio_box .mobile-nav li a {
  display: block;
  padding: 15px;
  margin-bottom: 1px;
  font-size: 15px;
}
.royal_portfolio_box .mobile-nav > li > .sub-menu,
.royal_portfolio_box .mobile-nav > li > .sub-menu-wrap {
  opacity: 1;
}
.royal_portfolio_box .mobile-nav > li > .sub-menu a,
.royal_portfolio_box .mobile-nav > li > .sub-menu-wrap a {
  font-size: 13px;
}
.royal_portfolio_box .mobile-logo,
.royal_portfolio_box .mobile-logo .site-tagline {
  text-align: center !important;
}
.royal_portfolio_box .mobile-logo {
  padding: 30px;
}
.royal_portfolio_box .sidebar-fold-btn {
  z-index: 900;
  -webkit-transition: margin 0.1s ease 0s;
  transition: margin 0.1s ease 0s;
}
.royal_portfolio_box .sidebar-fold-btn .fa {
  text-align: center;
  box-sizing: content-box;
}
.royal_portfolio_box .sidebar-closed .sidebar-fold-btn i[class*=left] {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.royal_portfolio_box .logo-and-tagline {
  overflow: hidden;
}
.royal_portfolio_box .logo-wrap {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  outline: none;
}
.royal_portfolio_box .logo-text {
  text-align: center;
}
.royal_portfolio_box .logo-img img:last-child {
  display: none;
}
.royal_portfolio_box .main-nav li,
.royal_portfolio_box .main-nav li a {
  outline: none !important;
}
.royal_portfolio_box .main-nav li a,
.royal_portfolio_box .filters li a {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.royal_portfolio_box .filters li:last-child .fa-royal-slash,
.royal_portfolio_box .filters li:last-child .fa-royal-vbar {
  visibility: hidden;
}
.royal_portfolio_box .filters .fa {
  transform: none !important;
}
.royal_portfolio_box .menu-item a {
  outline: none;
}
.royal_portfolio_box .main-nav .sub-menu {
  display: none;
}
.royal_portfolio_box .blog-filters,
.royal_portfolio_box .category .filters,
.royal_portfolio_box .portfolio-filters {
  display: none;
}
.royal_portfolio_box .sid-block .filters {
  font-size: 0;
}
.royal_portfolio_box .blog .blog-filters,
.royal_portfolio_box .no-isotope.category .filters,
.royal_portfolio_box .no-isotope.category .blog-filters,
.royal_portfolio_box .no-isotope.single-post .blog-filters,
.royal_portfolio_box .page-template-portfolio-php .portfolio-filters,
.royal_portfolio_box .no-isotope.tax-royal_portfolio_cats .portfolio-filters,
.royal_portfolio_box .no-isotope.single-royal_portfolio .portfolio-filters {
  display: block;
}
.royal_portfolio_box .fa-none {
  display: none !important;
}
.royal_portfolio_box .top-nav > li {
  position: relative;
  display: inline-block;
  margin-left: -4px;
}
.royal_portfolio_box .top-nav.top-nav-horizontal > li > .sub-menu-wrap {
  display: none;
}
.royal_portfolio_box .top-nav.top-nav-horizontal > li:hover > .sub-menu-wrap {
  display: block;
}
.royal_portfolio_box .top-nav.top-nav-horizontal .sub-menu-wrap {
  position: absolute;
  z-index: 900;
}
.royal_portfolio_box .top-nav.top-nav-horizontal .sub-menu {
  display: none;
}
.royal_portfolio_box .top-nav.top-nav-horizontal .sub-menu li {
  position: relative;
  text-align: left;
}
.royal_portfolio_box .top-nav.top-nav-horizontal .sub-menu .sub-menu-wrap {
  position: absolute;
  top: 0;
  padding: 0 !important;
}
.royal_portfolio_box .top-nav.top-nav-horizontal .sub-menu li a,
.royal_portfolio_box .menu-fold-style .top-nav-vertical .sub-menu li a {
  display: block;
}
.royal_portfolio_box .top-nav.top-nav-vertical .sub-menu {
  display: none;
}
.royal_portfolio_box .sidebar-top .filters li {
  display: inline-block;
}
.royal_portfolio_box .top-nav-container {
  position: fixed;
  z-index: 310;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .top-nav-outer {
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .top-nav-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}
.royal_portfolio_box .top-nav-center {
  position: relative;
  display: inline-block !important;
}
.royal_portfolio_box .top-nav-vertical li {
  display: block !important;
  text-align: center !important;
}
.royal_portfolio_box .top-nav-vertical > li {
  margin-left: 0 !important;
}
.royal_portfolio_box .top-nav-close {
  display: none;
  position: absolute;
  top: 50px;
  right: 50px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent;
  font-size: 25px;
  cursor: pointer;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}
.royal_portfolio_box .menu-fold-icon {
  cursor: pointer;
  display: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.royal_portfolio_box .menu-fold-icon .fa {
  text-align: center;
}
.royal_portfolio_box .top-nav-popup + .menu-fold-icon .fa {
  opacity: 0.5;
}
.royal_portfolio_box .menu-fold-style .top-nav {
  display: none;
}
.royal_portfolio_box .menu-fold-style .menu-fold-icon {
  display: block;
}
.royal_portfolio_box .tn-fade {
  display: none;
  top: 0;
  left: 0;
}
.royal_portfolio_box .tn-center-grow {
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}
.royal_portfolio_box .top-nav-popup.tn-center-grow {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.royal_portfolio_box .tn-top-left-grow {
  top: -100%;
  left: -100%;
  opacity: 0;
}
.royal_portfolio_box .top-nav-popup.tn-top-left-grow {
  opacity: 1;
  top: 0;
  left: 0;
}
.royal_portfolio_box .tn-top-right-grow {
  top: -100%;
  right: -100%;
  opacity: 0;
}
.royal_portfolio_box .top-nav-popup.tn-top-right-grow {
  opacity: 1;
  top: 0;
  right: 0;
}
.royal_portfolio_box .tn-bottom-left-grow {
  bottom: -100%;
  left: -100%;
  opacity: 0;
}
.royal_portfolio_box .top-nav-popup.tn-bottom-left-grow {
  opacity: 1;
  bottom: 0;
  left: 0;
}
.royal_portfolio_box .tn-bottom-right-grow {
  bottom: -100%;
  right: -100%;
  opacity: 0;
}
.royal_portfolio_box .top-nav-popup.tn-bottom-right-grow {
  opacity: 1;
  bottom: 0;
  right: 0;
}
.royal_portfolio_box .tn-top-slide {
  top: -100%;
  left: 0;
  opacity: 0;
}
.royal_portfolio_box .tn-bottom-slide {
  top: 100%;
  left: 0;
  opacity: 0;
}
.royal_portfolio_box .top-nav-popup.tn-top-slide,
.royal_portfolio_box .top-nav-popup.tn-bottom-slide {
  top: 0;
  opacity: 1;
}
.royal_portfolio_box .tn-left-slide {
  top: 0;
  left: -100%;
  opacity: 0;
}
.royal_portfolio_box .tn-right-slide {
  top: 0;
  left: 100%;
  opacity: 0;
}
.royal_portfolio_box .top-nav-popup.tn-left-slide,
.royal_portfolio_box .top-nav-popup.tn-right-slide {
  left: 0;
  opacity: 1;
}
.royal_portfolio_box .tn-skew-top {
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transform: perspective(600px) rotateX(-90deg);
  transform: perspective(600px) rotateX(-90deg);
  -webkit-transform-origin: center top 0;
  transform-origin: center top 0;
}
.royal_portfolio_box .tn-skew-bottom {
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transform: perspective(600px) rotateX(90deg);
  transform: perspective(600px) rotateX(90deg);
  -webkit-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
}
.royal_portfolio_box .top-nav-popup.tn-skew-top,
.royal_portfolio_box .top-nav-popup.tn-skew-bottom {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateX(0deg);
  transform: perspective(600px) rotateX(0deg);
}
.royal_portfolio_box .tn-skew-left {
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transform: perspective(600px) rotateY(90deg);
  transform: perspective(600px) rotateY(90deg);
  -webkit-transform-origin: center left 0;
  transform-origin: center left 0;
}
.royal_portfolio_box .top-nav-popup.tn-skew-left {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}
.royal_portfolio_box .tn-skew-right {
  top: 0;
  right: 0;
  opacity: 0;
  -webkit-transform: perspective(600px) rotateY(-90deg);
  transform: perspective(600px) rotateY(-90deg);
  -webkit-transform-origin: center right 0;
  transform-origin: center right 0;
}
.royal_portfolio_box .top-nav-popup.tn-skew-right {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}
.royal_portfolio_box .tn-skew-fade-top {
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transform: perspective(600px) rotateX(90deg);
  transform: perspective(600px) rotateX(90deg);
  -webkit-transform-origin: center top 0;
  transform-origin: center top 0;
}
.royal_portfolio_box .tn-skew-fade-bottom {
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transform: perspective(600px) rotateX(-90deg);
  transform: perspective(600px) rotateX(-90deg);
  -webkit-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
}
.royal_portfolio_box .top-nav-popup.tn-skew-fade-top,
.royal_portfolio_box .top-nav-popup.tn-skew-fade-bottom {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateX(0deg);
  transform: perspective(600px) rotateX(0deg);
}
.royal_portfolio_box .tn-skew-fade-left {
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transform: perspective(600px) rotateY(-90deg);
  transform: perspective(600px) rotateY(-90deg);
  -webkit-transform-origin: center left 0;
  transform-origin: center left 0;
}
.royal_portfolio_box .tn-skew-fade-right {
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transform: perspective(600px) rotateY(90deg);
  transform: perspective(600px) rotateY(90deg);
  -webkit-transform-origin: center right 0;
  transform-origin: center right 0;
}
.royal_portfolio_box .top-nav-popup.tn-skew-fade-left,
.royal_portfolio_box .top-nav-popup.tn-skew-fade-right {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}
.royal_portfolio_box .ps-container .ps-scrollbar-y-rail {
  position: absolute;
  right: 3px;
  z-index: 100;
  opacity: 0;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  transition: background-color 0.2s linear, opacity 0.2s linear;
}
.royal_portfolio_box .ps-container:hover .ps-scrollbar-y-rail,
.royal_portfolio_box .ps-container.hover .ps-scrollbar-y-rail,
.royal_portfolio_box .ps-container .ps-scrollbar-y-rail:hover,
.royal_portfolio_box .ps-container .ps-scrollbar-y-rail.hover,
.royal_portfolio_box .ps-container .ps-scrollbar-y-rail.in-scrolling {
  opacity: 1;
}
.royal_portfolio_box .ps-container .ps-scrollbar-y-rail.in-scrolling {
  background-color: transparent;
}
.royal_portfolio_box .ps-container .ps-scrollbar-y {
  position: absolute;
  right: 0px;
  cursor: pointer;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}
.royal_portfolio_box #blog-container,
.royal_portfolio_box .blog-post,
.royal_portfolio_box #portfolio-container,
.royal_portfolio_box .portfolio-post {
  overflow: hidden;
}
.royal_portfolio_box .post-width3x {
  width: 100%;
}
.royal_portfolio_box .post-media-wrap {
  position: relative;
  overflow: hidden;
}
.royal_portfolio_box .post-media {
  position: relative;
  overflow: hidden;
}
.royal_portfolio_box .post-media img {
  width: 100%;
  height: auto !important;
}
.royal_portfolio_box .audio-media {
  padding: 10px;
}
.royal_portfolio_box .audio-media {
  position: absolute;
  bottom: 0;
  z-index: 100;
}
.royal_portfolio_box .video-media,
.royal_portfolio_box .audio-media {
  width: 100%;
}
.royal_portfolio_box .audio-media audio,
.royal_portfolio_box .video-media video {
  width: 100%;
}
.royal_portfolio_box .audio-media iframe {
  height: auto !important;
  width: 100% !important;
}
.royal_portfolio_box .post-text-wrap {
  overflow: hidden;
}
.royal_portfolio_box .blog-post .post-categories,
.royal_portfolio_box .portfolio-post .post-categories {
  display: block;
  word-wrap: break-word;
  overflow: hidden;
}
.royal_portfolio_box .blog-post .post-cats-in,
.royal_portfolio_box .portfolio-post .post-cats-in {
  display: block;
}
.royal_portfolio_box .social-share-wrap .fa {
  margin-left: 10px;
  cursor: pointer;
}
.royal_portfolio_box .social-share-wrap > i {
  margin-left: 0 !important;
  padding-right: 10px;
  -webkit-transition: color 0.8s ease 0s;
  transition: color 0.8s ease 0s;
}
.royal_portfolio_box .social-share-wrap i {
  -webkit-transition: color 0.2s ease 0s;
  transition: color 0.2s ease 0s;
}
.royal_portfolio_box .social-share a:first-child .fa {
  margin-left: 0 !important;
}
.royal_portfolio_box .project-link .fa {
  padding-right: 5px;
}
.royal_portfolio_box .read-more,
.royal_portfolio_box .more-info {
  display: block;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.royal_portfolio_box .link-and-quote {
  width: 100%;
  height: 100% !important;
  padding: 20px;
  background-size: cover !important;
  background-position: center !important;
  text-align: center;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: crisp-edges;
}
.royal_portfolio_box .featured-media .link-and-quote {
  position: absolute;
  top: 0;
  left: 0;
  height: auto !important;
}
.royal_portfolio_box .link-and-quote p {
  padding: 14px 17px 18px 17px;
  margin-bottom: 30px;
}
.royal_portfolio_box .single-post .link-and-quote p {
  padding: 53px 40px;
}
.royal_portfolio_box .link-and-quote small {
  display: inline-block;
  padding: 14px 17px;
}
.royal_portfolio_box .quote-wrap p:before,
.royal_portfolio_box .link-wrap small:before {
  font-family: FontAwesome;
  padding: 5px;
}
.royal_portfolio_box .quote-wrap p:before {
  content: "\f10e";
  display: block;
  font-size: 25px !important;
  text-align: left;
}
.royal_portfolio_box .link-wrap small:before {
  content: "\f0c1";
  margin: 0 5px 0 -5px;
}
.royal_portfolio_box .blog-post .image-overlay {
  opacity: 0;
}
.royal_portfolio_box .blog-post .post-media:hover .image-overlay {
  opacity: 1;
}
.royal_portfolio_box .blog-post .image-overlay .fa {
  width: 50px;
  line-height: 50px;
  margin: -25px 0 0 -25px;
  opacity: 0;
}
.royal_portfolio_box .blog-post .post-media:hover .image-overlay .fa {
  opacity: 1;
}
.royal_portfolio_box .post-media-in-wrap {
  position: relative;
  overflow: hidden;
  -webkit-transform: translateZ(0);
}
.royal_portfolio_box .post-format-icon {
  position: absolute;
  z-index: 10;
  text-align: center;
}
.royal_portfolio_box .triangle-wrap {
  position: absolute;
  z-index: 101;
  width: 0;
  height: 0;
  border-top-style: solid;
  border-bottom-style: solid;
}
.royal_portfolio_box .portfolio-post .more-info {
  outline: 0 !important;
}
.royal_portfolio_box .portfolio-post .testimonial-wrap p {
  margin-top: 5px;
}
.royal_portfolio_box .portfolio-post .testimonial-wrap a {
  cursor: pointer;
}
.royal_portfolio_box .portfolio-post .image-overlay {
  z-index: 20;
  opacity: 1;
}
.royal_portfolio_box .portfolio-post .image-overlay .fa {
  z-index: 20;
  width: 50px;
  line-height: 50px;
  margin: -25px 0 0 -25px;
  opacity: 0;
}
.royal_portfolio_box .portfolio-post .post-media:hover .image-overlay .fa {
  opacity: 1;
}
.royal_portfolio_box .portfolio-post .post-media-in-wrap .rf-grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.333 0.3336 0.3336 0 0 0.3336 0.3336 0.3336 0 0 0.3336 0.3336 0.3336 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
}
.royal_portfolio_box .portfolio-post .post-media-in-wrap .rf-no-grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: none;
  -webkit-filter: grayscale(0%);
  opacity: 1;
}
.royal_portfolio_box .portfolio-post .post-media-in-wrap .rf-grayscale-trans {
  opacity: 0.9;
}
.royal_portfolio_box .portfolio-post .post-media-in-wrap .rf-grayscale-no-trans {
  opacity: 1;
}
.royal_portfolio_box .media-hovers {
  overflow: hidden;
}
.royal_portfolio_box .media-hover-link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .media-hover-fade {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-fade {
  opacity: 1;
}
.royal_portfolio_box .media-hover-fade-out {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  opacity: 1;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-fade-out {
  opacity: 0;
}
.royal_portfolio_box .media-hover-center-grow {
  position: absolute;
  top: 15%;
  left: 15%;
  z-index: 100;
  opacity: 0;
  width: 70%;
  height: 70%;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-center-grow {
  opacity: 1;
  top: 15px;
  left: 15px;
  width: calc(100% - 30px);
  width: -webkit-calc(100% - 30px);
  height: calc(100% - 30px);
  height: -webkit-calc(100% - 30px);
}
.royal_portfolio_box .media-hover-center-grow-full {
  position: absolute;
  top: 15%;
  left: 15%;
  z-index: 100;
  opacity: 0;
  width: 70%;
  height: 70%;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-center-grow-full {
  opacity: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .media-hover-top-left-grow {
  position: absolute;
  top: -100%;
  left: -100%;
  z-index: 100;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-top-left-grow {
  opacity: 1;
  top: 0;
  left: 0;
}
.royal_portfolio_box .media-hover-top-right-grow {
  position: absolute;
  top: -100%;
  right: -100%;
  z-index: 100;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-top-right-grow {
  opacity: 1;
  top: 0;
  right: 0;
}
.royal_portfolio_box .media-hover-bottom-left-grow {
  position: absolute;
  bottom: -100%;
  left: -100%;
  z-index: 100;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-bottom-left-grow {
  opacity: 1;
  bottom: 0;
  left: 0;
}
.royal_portfolio_box .media-hover-bottom-right-grow {
  position: absolute;
  bottom: -100%;
  right: -100%;
  z-index: 100;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-bottom-right-grow {
  opacity: 1;
  bottom: 0;
  right: 0;
}
.royal_portfolio_box .media-hover-top-slide {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 100;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .media-hover-bottom-slide {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-top-slide,
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-bottom-slide {
  top: 0;
  opacity: 1;
}
.royal_portfolio_box .media-hover-left-slide {
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 100;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .media-hover-right-slide {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 100;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-left-slide,
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-right-slide {
  left: 0;
  opacity: 1;
}
.royal_portfolio_box .media-hover-skew-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  opacity: 0;
  width: 100%;
  height: auto !important;
  -webkit-transform: perspective(600px) rotateX(-90deg);
  transform: perspective(600px) rotateX(-90deg);
  -webkit-transform-origin: center top 0;
  transform-origin: center top 0;
}
.royal_portfolio_box .media-hover-skew-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 12;
  opacity: 0;
  width: 100%;
  height: auto !important;
  -webkit-transform: perspective(600px) rotateX(90deg);
  transform: perspective(600px) rotateX(90deg);
  -webkit-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-top,
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-bottom {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateX(0deg);
  transform: perspective(600px) rotateX(0deg);
}
.royal_portfolio_box .media-hover-skew-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  opacity: 0;
  height: 100%;
  -webkit-transform: perspective(600px) rotateY(90deg);
  transform: perspective(600px) rotateY(90deg);
  -webkit-transform-origin: center left 0;
  transform-origin: center left 0;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-left {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}
.royal_portfolio_box .media-hover-skew-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 12;
  opacity: 0;
  height: 100%;
  -webkit-transform: perspective(600px) rotateY(-90deg);
  transform: perspective(600px) rotateY(-90deg);
  -webkit-transform-origin: center right 0;
  transform-origin: center right 0;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-right {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}
.royal_portfolio_box .media-hover-skew-full-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: perspective(600px) rotateX(-90deg);
  transform: perspective(600px) rotateX(-90deg);
  -webkit-transform-origin: center top 0;
  transform-origin: center top 0;
}
.royal_portfolio_box .media-hover-skew-full-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 12;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: perspective(600px) rotateX(90deg);
  transform: perspective(600px) rotateX(90deg);
  -webkit-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-full-top,
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-full-bottom {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateX(0deg);
  transform: perspective(600px) rotateX(0deg);
}
.royal_portfolio_box .media-hover-skew-full-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: perspective(600px) rotateY(90deg);
  transform: perspective(600px) rotateY(90deg);
  -webkit-transform-origin: center left 0;
  transform-origin: center left 0;
}
.royal_portfolio_box .media-hover-skew-full-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 12;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: perspective(600px) rotateY(-90deg);
  transform: perspective(600px) rotateY(-90deg);
  -webkit-transform-origin: center right 0;
  transform-origin: center right 0;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-full-left,
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-full-right {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}
.royal_portfolio_box .media-hover-skew-full-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: perspective(600px) rotateX(90deg);
  transform: perspective(600px) rotateX(90deg);
  -webkit-transform-origin: center top 0;
  transform-origin: center top 0;
}
.royal_portfolio_box .media-hover-skew-full-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 12;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: perspective(600px) rotateX(-90deg);
  transform: perspective(600px) rotateX(-90deg);
  -webkit-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-full-fade-top,
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-full-fade-bottom {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateX(0deg);
  transform: perspective(600px) rotateX(0deg);
}
.royal_portfolio_box .media-hover-skew-full-fade-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: perspective(600px) rotateY(-90deg);
  transform: perspective(600px) rotateY(-90deg);
  -webkit-transform-origin: center left 0;
  transform-origin: center left 0;
}
.royal_portfolio_box .media-hover-skew-full-fade-right {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: perspective(600px) rotateY(90deg);
  transform: perspective(600px) rotateY(90deg);
  -webkit-transform-origin: center right 0;
  transform-origin: center right 0;
}
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-full-fade-left,
.royal_portfolio_box .post-media-in-wrap:hover .media-hover-skew-full-fade-right {
  opacity: 1;
  -webkit-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}
.royal_portfolio_box .title-and-meta {
  float: left;
  width: 75%;
}
.royal_portfolio_box .title-and-meta-sharing {
  float: right;
}
.royal_portfolio_box .nxt-prev-post {
  float: right;
  width: 25%;
  text-align: right;
}
.royal_portfolio_box .next-post,
.royal_portfolio_box .previous-post {
  display: inline-block;
  text-align: center;
  overflow: hidden;
}
.royal_portfolio_box .back-link {
  display: none;
  position: static !important;
  left: auto !important;
  top: auto !important;
  border: 0 !important;
}
.royal_portfolio_box .p-single-back-link .back-link {
  display: inline-block;
}
.royal_portfolio_box .no-nxt-prev {
  display: none !important;
}
.royal_portfolio_box .meta-sep {
  padding: 0 5px;
}
.royal_portfolio_box .single-header .post-categories {
  word-wrap: break-word;
  overflow: hidden;
}
.royal_portfolio_box .featured-media,
.royal_portfolio_box .gallery-slideshow {
  position: relative;
}
.royal_portfolio_box .featured-media img,
.royal_portfolio_box .gallery-slideshow img {
  width: 100%;
  height: auto !important;
}
.royal_portfolio_box .featured-media .audio-media {
  padding: 10px;
}
.royal_portfolio_box .featured-media .audio-media {
  position: absolute;
  bottom: 0;
  z-index: 100;
  width: 100%;
}
.royal_portfolio_box .featured-media .video-media {
  width: 100%;
}
.royal_portfolio_box .featured-media .audio-media audio,
.royal_portfolio_box .featured-media .video-media video {
  width: 100%;
}
.royal_portfolio_box .gallery-slideshow {
  position: relative;
}
.royal_portfolio_box .gallery-slide {
  display: none;
  width: 100%;
}
.royal_portfolio_box .slideshow-caption {
  position: absolute;
  z-index: 120;
}
.royal_portfolio_box .stacked-caption {
  border: 1px solid transparent;
}
.royal_portfolio_box .stacked-caption span {
  display: inline-block;
}
.royal_portfolio_box .gallery-nav {
  position: relative;
  z-index: 120;
  line-height: 0;
}
.royal_portfolio_box .gallery-nav span {
  display: inline-block;
  overflow: hidden;
  line-height: 1;
  cursor: pointer;
  text-indent: 999999px;
  -webkit-transition: background-color 0.2s ease 0s;
  transition: background-color 0.2s ease 0s;
}
.royal_portfolio_box .gallery-nav span:last-child {
  margin-right: 0 !important;
}
.royal_portfolio_box .gallery-arrow {
  display: block;
  position: absolute;
  top: 50%;
  z-index: 100;
  text-align: center;
  -webkit-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}
.royal_portfolio_box .gallery-prev-slide {
  left: 0px;
}
.royal_portfolio_box .gallery-next-slide {
  right: 0px;
}
.royal_portfolio_box .gallery-slideshow:hover .gallery-arrow {
  opacity: 1 !important;
}
.royal_portfolio_box .lightbox-overlay .image-overlay .fa {
  width: 50px;
  margin: -25px 0 0 -25px;
  line-height: 50px;
}
.royal_portfolio_box .royal-gallery {
  list-style: none !important;
}
.royal_portfolio_box .royal-gallery .gallery-item {
  padding: 0 !important;
}
.royal_portfolio_box .gallery-icon img,
.royal_portfolio_box .gallery-icon a img {
  width: 100%;
  height: auto !important;
}
.royal_portfolio_box .gallery-caption,
.royal_portfolio_box .wp-caption-text {
  padding: 10px;
  border-width: 1px;
  border-style: solid;
  border-top: 0;
}
.royal_portfolio_box .gallery-item {
  float: left;
  text-align: center;
}
.royal_portfolio_box .gallery-columns-1 .gallery-item {
  float: none !important;
  width: 100%;
}
.royal_portfolio_box .single-post-sharing {
  position: relative;
}
.royal_portfolio_box .single-socials-wrap {
  display: block;
  margin: 0 auto;
}
.royal_portfolio_box .single-socials-wrap span {
  display: inline;
  cursor: default;
}
.royal_portfolio_box .single-socials-wrap i {
  margin-left: 15px;
  cursor: pointer;
}
.royal_portfolio_box .single-wrap {
  overflow: hidden;
}
.royal_portfolio_box .single-post .single-wrap {
  margin-right: 0 !important;
  width: 100% !important;
}
.royal_portfolio_box .single-header,
.royal_portfolio_box .single-content-wrap {
  box-shadow: none !important;
  border-radius: 0 !important;
}
.royal_portfolio_box .post-cont-pagination {
  margin: 20px 0;
}
.royal_portfolio_box .post-cont-pagination span {
  margin-right: 10px;
}
.royal_portfolio_box .single-tags {
  display: block;
  padding: 10px 0;
  clear: both;
}
.royal_portfolio_box .single-tags span {
  font-weight: bold;
}
.royal_portfolio_box .inner-content hr {
  border-style: solid;
  border-width: 1px;
}
.royal_portfolio_box .inner-content blockquote {
  padding: 15px;
  border-left-style: solid;
  border-left-width: 3px;
  background-color: #f9f9f9;
  color: #727272;
  font-style: italic;
}
.royal_portfolio_box .inner-content blockquote p {
  margin: 0 !important;
}
.royal_portfolio_box .inner-content table th {
  font-weight: bold;
}
.royal_portfolio_box .inner-content table th,
.royal_portfolio_box .inner-content table tr,
.royal_portfolio_box .inner-content table td {
  padding: 15px;
  border-style: solid;
  border-width: 1px;
}
.royal_portfolio_box .inner-content dl dt {
  font-weight: bold;
}
.royal_portfolio_box .inner-content dl dd {
  margin-bottom: 20px;
}
.royal_portfolio_box .inner-content .single-content ul,
.royal_portfolio_box .inner-content .comment-content ul {
  list-style-type: circle;
  list-style-position: inside;
}
.royal_portfolio_box .inner-content .single-content ol,
.royal_portfolio_box .inner-content .comment-content ol {
  list-style-type: decimal;
  list-style-position: inside;
}
.royal_portfolio_box .inner-content .single-content > ul li,
.royal_portfolio_box .inner-content .single-content > ol li,
.royal_portfolio_box .inner-content .comment-content > ul li,
.royal_portfolio_box .inner-content .comment-content > ol li {
  padding: 3px 3px 3px 20px;
}
.royal_portfolio_box .inner-content address {
  font-style: italic;
}
.royal_portfolio_box .inner-content code,
.royal_portfolio_box .inner-content pre,
.royal_portfolio_box .inner-content tt,
.royal_portfolio_box .inner-content samp,
.royal_portfolio_box .inner-content kbd,
.royal_portfolio_box .inner-content var {
  font-family: monospace, serif !important;
}
.royal_portfolio_box .inner-content pre {
  overflow: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
  border-style: solid;
  border-width: 1px;
}
.royal_portfolio_box .inner-content blockquote,
.royal_portfolio_box .inner-content pre {
  padding: 15px;
  background-color: #f9f9f9;
}
.royal_portfolio_box .inner-content sub,
.royal_portfolio_box .inner-content sup {
  position: relative;
  height: 0;
  line-height: 0;
  font-size: 75%;
}
.royal_portfolio_box .inner-content sub {
  bottom: -3px;
}
.royal_portfolio_box .inner-content sup {
  top: -5px;
}
.royal_portfolio_box .project-info {
  overflow: hidden;
}
.royal_portfolio_box .project-description-wrap {
  float: left;
  width: 68%;
}
.royal_portfolio_box .project-details-wrap {
  float: right;
  width: 29%;
}
.royal_portfolio_box .project-details > li:first-child {
  padding-top: 0 !important;
}
.royal_portfolio_box .project-details > li {
  overflow: hidden;
}
.royal_portfolio_box .project-details li:last-child {
  border-bottom: 0;
}
.royal_portfolio_box .project-details strong {
  float: left;
  width: 120px;
}
.royal_portfolio_box .project-details strong .fa {
  margin-right: 5px;
}
.royal_portfolio_box .proj-details-meta {
  float: left;
}
.royal_portfolio_box .proj-details-meta li {
  margin-bottom: 5px;
}
.royal_portfolio_box .info-sharing a {
  margin-right: 10px;
}
.royal_portfolio_box .info-sharing a:last-child {
  margin-right: 0 !important;
}
.royal_portfolio_box .project-info-horz .no-project-desc {
  float: none !important;
  width: 100% !important;
}
.royal_portfolio_box .similar-items h3 span {
  display: block;
}
.royal_portfolio_box .jcarousel-wrap {
  position: relative;
}
.royal_portfolio_box .jcarousel {
  position: relative;
  overflow: hidden;
}
.royal_portfolio_box .jcarousel ul {
  width: 20000em;
  position: relative;
}
.royal_portfolio_box .jcarousel li {
  float: left;
}
.royal_portfolio_box .jcarousel .image-overlay-wrap {
  overflow: hidden;
}
.royal_portfolio_box .jcarousel .image-overlay-wrap h5 {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.royal_portfolio_box .jcarousel li img {
  height: auto !important;
  width: 100% !important;
}
.royal_portfolio_box .jcarousel-prev,
.royal_portfolio_box .jcarousel-next {
  position: absolute;
  top: 50%;
  z-index: 10;
  text-align: center;
}
.royal_portfolio_box .jcarousel-prev i,
.royal_portfolio_box .jcarousel-next i {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
}
.royal_portfolio_box .image-overlay-wrap {
  position: relative;
}
.royal_portfolio_box .image-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease 0s, background-color 0.4s ease 0s;
  transition: opacity 0.4s ease 0s, background-color 0.4s ease 0s;
}
.royal_portfolio_box .image-overlay:hover {
  opacity: 1;
}
.royal_portfolio_box .image-overlay .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  cursor: pointer;
}
.royal_portfolio_box .image-overlay a {
  display: block;
  width: 100%;
  height: 100%;
}
.royal_portfolio_box .search-query + hr {
  margin-bottom: 50px;
}
.royal_portfolio_box .search-results-wrap {
  margin-bottom: 50px;
}
.royal_portfolio_box .search-result-thumbnail {
  position: relative;
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 15px;
}
.royal_portfolio_box .search-result-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}
.royal_portfolio_box .search-result-thumbnail p {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  margin: 0 !important;
  line-height: 150px !important;
  text-align: center;
}
.royal_portfolio_box .pagination-wrap a,
.royal_portfolio_box .pagination-wrap span {
  display: inline-block;
}
.royal_portfolio_box .pagination-wrap i {
  line-height: 0;
}
.royal_portfolio_box .load-more-wrap[data-behaviour=facebook] {
  display: none;
}
.royal_portfolio_box .load-more-wrap i {
  margin-right: 10px;
}
.royal_portfolio_box .load-more-wrap a {
  outline: none;
}
.royal_portfolio_box .default-pagination .default-prev-link {
  float: left;
}
.royal_portfolio_box .default-pagination .default-next-link {
  float: right;
}
.royal_portfolio_box #infscr-loading {
  display: none !important;
}
.royal_portfolio_box .contact-form-wrap {
  overflow: hidden;
}
.royal_portfolio_box .contact-form-full {
  width: 100% !important;
  margin: 0 !important;
}
.royal_portfolio_box .contact-info ul li:first-child span {
  padding-top: 0 !important;
}
.royal_portfolio_box .contact-info ul li:last-child span {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}
.royal_portfolio_box .google-map {
  overflow: hidden;
}
.royal_portfolio_box .google-map img {
  max-width: none;
}
.royal_portfolio_box .rf-input {
  width: 100%;
  font: 14px "Ubuntu";
  -webkit-transition: border 0.4s ease 0s;
  transition: border 0.4s ease 0s;
}
.royal_portfolio_box .pers-message {
  resize: none;
  width: 100%;
}
.royal_portfolio_box .rf-error {
  -webkit-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}
.royal_portfolio_box .post-password-form p {
  font-style: italic;
}
.royal_portfolio_box .post-password-form input {
  display: inline !important;
  width: auto;
  margin-bottom: 0;
  text-align: left !important;
}
.royal_portfolio_box .search-wrap {
  position: relative;
}
.royal_portfolio_box #s {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
}
.royal_portfolio_box #s,
.royal_portfolio_box .search-icon {
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.royal_portfolio_box .search-icon {
  position: absolute;
}
.royal_portfolio_box #searchsubmit {
  display: none;
}
.royal_portfolio_box .comments-empty {
  display: none;
}
.royal_portfolio_box .comments-count span {
  display: block;
}
.royal_portfolio_box .comment-author-img {
  float: right;
  overflow: hidden;
}
.royal_portfolio_box .comment-author-img img {
  margin: 10px 15px !important;
  border-radius: 50%;
}
.royal_portfolio_box .comment header p span a {
  font-weight: bold;
}
.royal_portfolio_box .comment header p span a:hover {
  font-weight: bold;
}
.royal_portfolio_box .children {
  margin-left: 30px;
}
.royal_portfolio_box .bypostauthor {
  /* 
  This class is styled dynamicly from Theme Customizer.
  framework > customizer > css > dynamic-styles.css 
  */
}
.royal_portfolio_box .comment-reply-title small {
  display: block;
}
.royal_portfolio_box .comments-pagination {
  margin-top: 15px;
}
.royal_portfolio_box .comments-pagination .older-comments {
  float: left;
}
.royal_portfolio_box .comments-pagination .newer-comments {
  float: right;
}
.royal_portfolio_box .awaiting-moderation {
  margin-top: 15px;
  font-style: italic;
  text-align: right;
}
.royal_portfolio_box .pingback p {
  padding: 5px 0;
}
.royal_portfolio_box .logged-in-as {
  margin: 0 !important;
  margin-bottom: 5px !important;
}
.royal_portfolio_box .comments-closed {
  margin: 15px 0;
  font-style: italic;
  text-align: center;
}
.royal_portfolio_box .comments-area-wrap .form-submit {
  margin-bottom: 0 !important;
}
.royal_portfolio_box .top-widgets-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
}
.royal_portfolio_box .admin-bar .top-widgets-wrap {
  top: 32px;
}
.royal_portfolio_box .top-widgets-wrap .top-widgets {
  display: none;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
}
.royal_portfolio_box .top-widgets-fold-btn {
  position: absolute;
  right: 0;
  bottom: -40px;
}
.royal_portfolio_box .top-widgets-fold-btn > div {
  float: right;
  overflow: hidden;
}
.royal_portfolio_box .top-widgets-fold-btn i {
  width: 40px;
  height: 40px;
  padding: 5px 5px 0 0;
  font-size: 0.9em;
  text-align: right;
  cursor: pointer;
}
.royal_portfolio_box .footer-widgets {
  overflow: hidden;
}
.royal_portfolio_box .sidebar-widget table,
.royal_portfolio_box .top-widget table,
.royal_portfolio_box .footer-widget table {
  width: 100%;
}
.royal_portfolio_box .sidebar-widget caption,
.royal_portfolio_box .top-widget caption,
.royal_portfolio_box .footer-widget caption {
  padding: 2%;
  font-weight: bold;
}
.royal_portfolio_box .sidebar-widget thead tr th,
.royal_portfolio_box .top-widget thead tr th,
.royal_portfolio_box .footer-widget thead tr th {
  padding: 2% 1%;
  text-align: center;
}
.royal_portfolio_box .sidebar-widget tbody tr td,
.royal_portfolio_box .top-widget tbody tr td,
.royal_portfolio_box .footer-widget tbody tr td {
  padding: 2% 1%;
  text-align: center;
}
.royal_portfolio_box #wp-calendar #prev,
.royal_portfolio_box #wp-calendar #next {
  padding: 2% 4%;
}
.royal_portfolio_box #wp-calendar #prev {
  text-align: left;
}
.royal_portfolio_box #wp-calendar #next {
  text-align: right;
}
.royal_portfolio_box .sidebar-widget .sub-menu,
.royal_portfolio_box .top-widget .sub-menu,
.royal_portfolio_box .footer-widget .sub-menu {
  padding-left: 10px;
}
.royal_portfolio_box .sidebar-widget select,
.royal_portfolio_box .top-widget select,
.royal_portfolio_box .footer-widget select {
  width: 100%;
  padding: 5px;
}
.royal_portfolio_box .textwidget p {
  margin-bottom: 10px;
}
.royal_portfolio_box .textwidget p:last-child {
  margin-bottom: 0;
}
.royal_portfolio_box .textwidget img {
  height: auto;
}
.royal_portfolio_box .tagcloud {
  word-wrap: break-word;
}
.royal_portfolio_box .tagcloud a:not([href*=portfolio]) {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid;
  margin: 0 5px 5px 0;
  border-radius: 2px;
}
.royal_portfolio_box .tagcloud a[href*=portfolio] {
  display: block;
}
.royal_portfolio_box .top-widget,
.royal_portfolio_box .footer-widget {
  float: left;
}
.royal_portfolio_box .PI_SimpleTwitterTweets .tweets > li {
  margin-bottom: 20px;
}
.royal_portfolio_box .PI_SimpleTwitterTweets .tweets > li:after {
  display: block;
  content: "";
  clear: both;
}
.royal_portfolio_box .PI_SimpleTwitterTweets .tweets > li img:first-child {
  margin-right: 15px;
  margin-bottom: 15px;
}
.royal_portfolio_box .PI_SimpleTwitterTweets .tweets > li em:last-child {
  font-size: 13px !important;
}
.royal_portfolio_box .widget_recent_portfolio li {
  overflow: hidden;
}
.royal_portfolio_box .widget_recent_portfolio .recent-folio-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}
.royal_portfolio_box .widget_recent_portfolio .recent-folio-thumb img {
  position: absolute;
  z-index: 3;
  width: 100px;
  height: auto;
}
.royal_portfolio_box .widget_recent_portfolio .recent-folio-thumb i {
  position: absolute;
  z-index: 2;
  display: block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
}
.royal_portfolio_box .widget_recent_portfolio a {
  display: block;
}
.royal_portfolio_box .widget_recent_portfolio div span {
  font-size: 11px;
  line-height: 12px;
}
.royal_portfolio_box .copy-and-soc {
  width: auto;
  /*overflow: hidden;*/
  -webkit-transition: margin 0.1s ease 0s;
  transition: margin 0.1s ease 0s;
}
.royal_portfolio_box .footer-fold-btn {
  display: none;
  position: absolute;
  top: -35px;
  left: 0;
}
.royal_portfolio_box .footer-fold-btn i {
  width: 35px;
  height: 35px;
  font-size: 1em !important;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
}
.royal_portfolio_box .socials-wrap {
  cursor: default;
}
.royal_portfolio_box .socials-wrap i {
  text-align: center;
}
.royal_portfolio_box .socials-wrap a {
  outline: none !important;
}
.royal_portfolio_box .empty-social {
  display: none;
}
.royal_portfolio_box .back-to-top {
  display: none;
  position: fixed;
  z-index: 300;
  text-align: center;
}
.royal_portfolio_box .back-to-top .fa {
  box-sizing: content-box;
}
.royal_portfolio_box body.page-template-slider-blank {
  padding: 0 !important;
}
.royal_portfolio_box body.page-template-slider-blank .royal-revslider {
  margin: 0 !important;
}
.royal_portfolio_box body.page-template-slider-blank .fullscreen-container {
  width: 100% !important;
}
.royal_portfolio_box body.page-template-default.def-page-margins #main-wrap,
.royal_portfolio_box body.page-template-default.def-page-paddings .inner-content,
.royal_portfolio_box body.page-template-default.def-page-margins .inner-content-wrap {
  padding: 0 !important;
}
.royal_portfolio_box body.page-template-default.def-page-margins #sidebar-top,
.royal_portfolio_box body.page-template-default.def-page-margins .page-header,
.royal_portfolio_box body.page-template-default.def-page-margins .inner-content {
  margin-bottom: 0 !important;
}
.royal_portfolio_box .page-template-slider-sidebar #main-wrap {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.royal_portfolio_box body.sidebar-fixed,
.royal_portfolio_box body.sidebar-top-fixed {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.royal_portfolio_box body.sidebar-fixed #page-wrap,
.royal_portfolio_box body.sidebar-top-fixed #page-wrap {
  border-top-width: 1px !important;
  border-top-color: transparent !important;
  border-bottom-width: 1px !important;
  border-bottom-color: transparent !important;
  border-radius: 0 !important;
}
.royal_portfolio_box .sidebar-fixed #sidebar {
  position: fixed;
  z-index: 200;
  height: 100%;
  overflow: hidden;
}
.royal_portfolio_box .sidebar-closed #sidebar,
.royal_portfolio_box .copy-closed.copy-fixed .copy-and-soc {
  overflow: hidden;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.royal_portfolio_box .sidebar-top-fixed #sidebar-top {
  position: static;
  top: 0;
  z-index: 310;
}
.royal_portfolio_box .admin-bar.sidebar-top-fixed #sidebar-top {
  top: 32px;
}
.royal_portfolio_box .sidebar-closed #main-wrap,
.royal_portfolio_box .sidebar-closed .royal-revslider,
.royal_portfolio_box .copy-closed .copy-and-soc {
  margin: 0 !important;
}
.royal_portfolio_box .sidebar-top-fixed .royal-revslider + #main-wrap {
  margin-top: 0 !important;
}
.royal_portfolio_box .p-single-back-link.sharing-nxt-prev-p.single-royal_portfolio .single-post-sharing {
  text-align: center;
}
.royal_portfolio_box .p-single-back-link.sharing-nxt-prev-p.single-royal_portfolio .single-socials-wrap {
  display: none !important;
}
.royal_portfolio_box .project-info-closed .project-info {
  display: none;
}
.royal_portfolio_box .single-header-below-p .portfolio-single-header,
.royal_portfolio_box .single-header-below-b .blog-single-header {
  padding-bottom: 0 !important;
}
.royal_portfolio_box .single-header-below-p.single-royal_portfolio .single-content-wrap,
.royal_portfolio_box .single-header-below-b.single-post .single-content-wrap {
  padding-top: 1px !important;
}
.royal_portfolio_box .hide-single-sharing-p.single-royal_portfolio .single-socials-wrap span,
.royal_portfolio_box .hide-single-sharing-p.single-royal_portfolio .project-info-sharing {
  display: none !important;
}
.royal_portfolio_box .project-info-closed.single-royal_portfolio .single-wrap,
.royal_portfolio_box .project-info-horz.single-royal_portfolio .single-wrap,
.royal_portfolio_box .project-info-closed.single-royal_portfolio .single-header,
.royal_portfolio_box .project-info-closed.single-royal_portfolio .single-content-wrap {
  width: 100% !important;
  margin-right: 0 !important;
}
.royal_portfolio_box .project-info-horz .project-info {
  width: 100% !important;
  margin-left: 0 !important;
  height: auto !important;
  clear: both;
}
.royal_portfolio_box .project-info-horz .project-info .previous-post {
  float: left !important;
}
.royal_portfolio_box .project-info-horz .project-info .next-post {
  float: right !important;
}
.royal_portfolio_box .project-info-below-right .project-info {
  position: relative;
  z-index: 10;
  margin-bottom: 0 !important;
}
.royal_portfolio_box .project-info-below-right.single-royal_portfolio .single-wrap {
  width: 100% !important;
}
.royal_portfolio_box .project-info-right.single-royal_portfolio .single-wrap,
.royal_portfolio_box .project-info-below-right.single-royal_portfolio .single-content-wrap,
.royal_portfolio_box .project-info-below-right.single-header-below-p .portfolio-single-header {
  float: left;
}
.royal_portfolio_box .project-info-right .project-description-wrap,
.royal_portfolio_box .project-info-right .project-details-wrap,
.royal_portfolio_box .project-info-below-right .project-description-wrap,
.royal_portfolio_box .project-info-below-right .project-details-wrap {
  width: 100%;
  float: none;
}
.royal_portfolio_box .project-nxt-prev-p .portfolio-single .nxt-prev-post {
  width: 100%;
  text-align: center;
}
.royal_portfolio_box .single-royal_portfolio.hide-nxt-prev-p .nxt-prev-post,
.royal_portfolio_box .single-royal_portfolio.hide-nxt-prev-p .previous-post,
.royal_portfolio_box .single-royal_portfolio.hide-nxt-prev-p .next-post,
.royal_portfolio_box .single-royal_portfolio.sharing-nxt-prev-p .nxt-prev-post,
.royal_portfolio_box .single-royal_portfolio.project-nxt-prev-p .single-header .nxt-prev-post,
.royal_portfolio_box .single-royal_portfolio.project-nxt-prev-p .single-post-sharing .previous-post,
.royal_portfolio_box .single-royal_portfolio.project-nxt-prev-p .single-post-sharing .next-post,
.royal_portfolio_box .single-royal_portfolio.header-nxt-prev-p .project-info .nxt-prev-post,
.royal_portfolio_box .single-royal_portfolio.header-nxt-prev-p .single-post-sharing .previous-post,
.royal_portfolio_box .single-royal_portfolio.header-nxt-prev-p .single-post-sharing .next-post,
.royal_portfolio_box .single-post.hide-nxt-prev-b .nxt-prev-post,
.royal_portfolio_box .single-post.hide-nxt-prev-b .previous-post,
.royal_portfolio_box .single-post.hide-nxt-prev-b .next-post,
.royal_portfolio_box .single-post.sharing-nxt-prev-b .nxt-prev-post,
.royal_portfolio_box .single-post.header-nxt-prev-b .single-post-sharing .previous-post,
.royal_portfolio_box .single-post.header-nxt-prev-b .single-post-sharing .next-post {
  display: none;
}
.royal_portfolio_box .single-post.hide-nxt-prev-b .title-and-meta,
.royal_portfolio_box .single-post.sharing-nxt-prev-b .title-and-meta,
.royal_portfolio_box .single-royal_portfolio.hide-nxt-prev-p .title-and-meta,
.royal_portfolio_box .single-royal_portfolio.sharing-nxt-prev-p .title-and-meta,
.royal_portfolio_box .single-royal_portfolio.project-nxt-prev-p .title-and-meta {
  float: none;
  width: 100%;
}
.royal_portfolio_box .single-post.sharing-nxt-prev-b .single-post-sharing .previous-post,
.royal_portfolio_box .single-post.sharing-nxt-prev-b .single-post-sharing .next-post,
.royal_portfolio_box .single-royal_portfolio.sharing-nxt-prev-p .single-post-sharing .previous-post,
.royal_portfolio_box .single-royal_portfolio.sharing-nxt-prev-p .single-post-sharing .next-post {
  position: absolute;
  top: 0;
}
.royal_portfolio_box .single-post.sharing-nxt-prev-b .single-post-sharing .previous-post,
.royal_portfolio_box .single-royal_portfolio.sharing-nxt-prev-p .single-post-sharing .previous-post {
  left: 0;
}
.royal_portfolio_box .single-post.sharing-nxt-prev-b .single-post-sharing .next-post,
.royal_portfolio_box .single-royal_portfolio.sharing-nxt-prev-p .single-post-sharing .next-post {
  right: 0;
}
.royal_portfolio_box .copy-fixed .copy-and-soc {
  position: fixed;
  bottom: 0;
  z-index: 300;
  margin-left: 0 !important;
}
.royal_portfolio_box .copy-fixed .copy-mobile {
  display: block;
  position: static;
  width: 100%;
}
.royal_portfolio_box .copy-horizontal-1 .copyright-wrap,
.royal_portfolio_box .copy-horizontal-2 .socials-wrap {
  float: left !important;
}
.royal_portfolio_box .copy-horizontal-1 .socials-wrap,
.royal_portfolio_box .copy-horizontal-2 .copyright-wrap {
  float: right !important;
}
.royal_portfolio_box .copy-horizontal-2 .socials-wrap {
  float: left !important;
}
.royal_portfolio_box .copy-horizontal-1 .socials-wrap,
.royal_portfolio_box .copy-horizontal-2 .socials-wrap {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.royal_portfolio_box .jcarousel .image-overlay-wrap {
  min-height: 80px;
  border: 1px solid #ddd;
}
.royal_portfolio_box .similar-items h3 span {
  border-color: #ddd;
}
.royal_portfolio_box .single-post-sharing .social-share a i {
  font-family: FontAwesome;
}
.royal_portfolio_box .single-post-sharing .social-share a:hover {
  color: #777;
}
.royal_portfolio_box textarea.rf-input, .royal_portfolio_box textarea.rf-input:focus {
  background: #fff;
}
.royal_portfolio_box .inner-content a:hover, .royal_portfolio_box .post-cont-pagination > span:not(.pagi-label) {
  color: #444;
}

.image-overlay-wrap img {
  max-width: 100%;
}

.school-profile-timeline .content-wrap.bg1 {
  background: #fff;
  margin-bottom: 7px;
}

.eportfoliosProfile {
  background: #fff;
  border-top: 2px solid var(--main-color);
}

.body_for_public_pages {
  background: #fff;
  padding: 0;
}
.body_for_public_pages .error_flash {
  margin-bottom: 0;
}
.body_for_public_pages:before, .body_for_public_pages:after {
  display: none;
}
.body_for_public_pages .register_logos_container {
  margin-top: 20vh;
}
.body_for_public_pages .register_logos_container img {
  height: 60px;
  object-fit: contain;
  margin: 0 20px;
}
.body_for_public_pages #content_wrapper {
  box-shadow: unset;
  padding: 0;
  border-radius: 0;
}

.public_banner {
  background: transparent url("/img/public_banner.png") 0% 0% no-repeat padding-box;
}
.public_banner .public_banner_wrapper {
  display: flex;
  align-items: center;
  min-height: 120px;
  padding: 15px 4vw;
}
.public_banner h1 {
  margin: 0;
  color: var(--main-color);
}

.content_of_registeration_page {
  padding: 25px 4vw;
  flex-wrap: wrap;
}
.content_of_registeration_page .register-tabs-container {
  min-width: 220px;
}
@media (max-width: 650px) {
  .content_of_registeration_page .register-tabs-container {
    flex: 1;
  }
}
.content_of_registeration_page .register-tabs-container ul {
  list-style: none;
  display: inline-block;
}
@media (max-width: 650px) {
  .content_of_registeration_page .register-tabs-container ul {
    display: block;
  }
}
.content_of_registeration_page .register-tabs-container ul li {
  width: 100%;
  text-transform: uppercase;
  padding: 15px 25px;
}
.content_of_registeration_page .register-tabs-container ul li.active {
  font-weight: 500;
  background: rgba(var(--main-color-rgb), 0.15);
  transform: skew(22deg, 0deg);
}
.content_of_registeration_page .register-tabs-container ul li.active a, .content_of_registeration_page .register-tabs-container ul li.active a:hover, .content_of_registeration_page .register-tabs-container ul li.active a:active, .content_of_registeration_page .register-tabs-container ul li.active a:focus {
  transform: skew(-22deg, 0deg);
  color: var(--main-color);
}
.content_of_registeration_page .register-tabs-container ul li a, .content_of_registeration_page .register-tabs-container ul li a:hover, .content_of_registeration_page .register-tabs-container ul li a:active, .content_of_registeration_page .register-tabs-container ul li a:focus {
  font-size: 16px;
  cursor: default;
  color: #444;
  text-decoration: unset;
  display: block;
}
.content_of_registeration_page .registration-form-container {
  flex: 1;
  max-width: 1000px;
  min-width: 320px;
}
@media (min-width: 650px) {
  .content_of_registeration_page .registration-form-container {
    padding-right: 8vw;
  }
}
.content_of_registeration_page .registration-form-container #check_guardian_id {
  width: 100%;
  height: 46px;
  font-size: 16px;
}
.content_of_registeration_page .registration-form-container .nav-of-form-container {
  margin-bottom: 30px;
  position: relative;
}
.content_of_registeration_page .registration-form-container .nav-of-form-container .page-counter {
  display: inline-block;
  padding: 14px;
  background: #eee;
  transform: skew(22deg, 0);
  opacity: 0.8;
  position: absolute;
  right: 0;
  top: 0;
}
.content_of_registeration_page .registration-form-container .nav-of-form-container .page-counter p {
  font-size: 19px;
  transform: skew(-22deg, 0);
  margin: 0;
  font-weight: 300;
}
.content_of_registeration_page .registration-form-container .nav-of-form-container .page-counter p b {
  font-size: 20px;
}
.content_of_registeration_page .registration-form-container .nav-of-form-container .page-title {
  text-align: center;
  padding-right: 50px;
  margin-top: 0;
}
.content_of_registeration_page .registration-form-container .already_registered_link {
  color: #444;
  text-decoration: underline;
}
.content_of_registeration_page .registration-form-container .btns_of_register_parent_container {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 10px;
  align-items: center;
}
.content_of_registeration_page .registration-form-container .btns_of_register_parent_container .btn {
  height: 46px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content_of_registeration_page .form-actions .btn {
  width: 100%;
  background: var(--main-color);
  color: #fff;
  height: 46px;
  font-size: 16px;
}

#page-wrap {
  width: 100%;
  max-width: none;
  float: none;
  margin: 0 auto;
}

.top-widgets {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

#page-wrap {
  border: none;
}

#main-wrap {
  padding-top: 40px;
  padding-right: 0;
  padding-bottom: 30px;
  padding-left: 0;
}

@media screen and (max-width: 950px) {
  #main-wrap {
    padding: 6.6666666667% 5.6666666667% 5% 5.6666666667%;
  }
}
.body-section {
  margin-bottom: 0px;
}

@media screen and (max-width: 1050px) {
  .project-info {
    margin-bottom: 0px;
  }
}
@media screen and (max-width: 950px) {
  .body-section {
    margin-bottom: 0%;
  }

  .project-info {
    margin-bottom: 0%;
  }
}
#main-wrap {
  background-color: rgba(255, 255, 255, 0);
  background-image: none;
  background-size: auto;
  background-attachment: scroll;
  background-repeat: repeat;
  background-position: right top;
}

.inner-content-wrap {
  max-width: 940px;
}

.inner-content {
  padding-top: 20px;
  padding-right: 0px;
  padding-bottom: 25px;
  padding-left: 0px;
}

@media screen and (max-width: 950px) {
  .inner-content {
    padding: 3.3333333333% 0% 4.1666666667% 0%;
  }
}
.stacked-caption {
  padding: 0 0px;
}

.inner-content {
  background-color: rgba(255, 255, 255, 0);
  color: #8d8d8d;
}

.gallery-slideshow {
  background-color: rgba(255, 255, 255, 0);
}

.gallery-slideshow .stacked-caption {
  color: #8d8d8d;
}

.inner-content h1,
.inner-content h2,
.inner-content h3,
.inner-content h4,
.inner-content h5,
.inner-content h6 {
  color: #3a3a3a;
}

.inner-content a {
  color: var(--main-color);
}

.single-meta,
.single-meta a,
.single-tags,
.single-tags a {
  color: #999999;
}

.inner-content a:hover,
.post-cont-pagination > span:not(.pagi-label) {
  color: #3a3a3a;
}

.inner-content blockquote {
  border-color: var(--main-color);
}

.wpb_tabs_nav .ui-tabs-anchor,
.wpb_accordion_header a {
  color: #3a3a3a;
}

.inner-content hr,
.inner-content th,
.inner-content h3,
.inner-content h3 span,
.inner-content tr,
.inner-content td,
.inner-content pre,
.inner-content .wp-caption-text,
.inner-content .wp-playlist,
.gallery-caption,
.search-result-thumbnail p,
.comments-area,
.single-post-sharing,
.project-details li,
.contact-info li span {
  border-color: #e0e0e0;
}

.inner-content a {
  text-decoration: none;
}

.inner-sidebar {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.sid-block {
  margin-bottom: 0px;
}

#sidebar-top,
.m-nav-and-logo {
  background-color: white;
}

@media screen and (max-width: 950px) {
  .m-nav-and-logo {
    margin-bottom: 0%;
  }
}
#sidebar {
  border: none;
}

.sidebar-fold-btn {
  display: none;
}

.sidebar-fold-btn .fa {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.sidebar-fold-btn {
  position: fixed;
  margin-top: 0px;
  margin-right: 0px;
}

.sidebar-closed .sidebar-fold-btn {
  margin-right: 0px;
}

.sidebar-fold-btn .fa {
  background-color: #666666;
  color: #fcfcfc;
}

.sidebar-fold-btn .fa:hover {
  background-color: #111111;
  color: #fcfcfc;
}

.sidebar-fold-btn .fa {
  font-size: 14px;
}

.ps-scrollbar-y-rail {
  visibility: hidden;
}

.ps-scrollbar-y-rail,
.ps-scrollbar-y {
  width: 8px;
}

.ps-scrollbar-y {
  background-color: #666666;
}

.ps-scrollbar-y-rail:hover .ps-scrollbar-y,
.ps-scrollbar-y-rail.hover .ps-scrollbar-y {
  background-color: #111111;
}

.sidebar-top .logo-and-tagline {
  float: right;
}

.sidebar-top .top-nav-wrap {
  float: left;
}

.sidebar-top-fixed #sidebar-top {
  width: 100%;
  max-width: none;
}

#sidebar-top > div {
  padding-top: 14px;
  padding-left: 25px;
  padding-bottom: 7px;
  padding-right: 33px;
}

#sidebar-top {
  margin-bottom: 0px;
}

#sidebar-top {
  background-color: white;
}

#sidebar-top {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

.logo-and-tagline {
  text-align: right;
}

.logo-wrap {
  max-width: 224px;
}

.logo-and-tagline {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.logo-wrap {
  background-color: rgba(255, 255, 255, 0);
  color: #3a3a3a;
}

.logo-wrap:hover {
  color: #3a3a3a;
}

.logo-wrap {
  border: none;
}

.logo-text {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 35px;
  line-height: 65px;
  letter-spacing: 0px;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.logo-text {
  text-decoration: none;
}

.site-tagline {
  display: none;
}

.site-tagline {
  text-align: right;
}

.site-tagline {
  margin-top: 0px;
}

.site-tagline {
  color: #777777;
}

.site-tagline {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 1px;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.site-tagline {
  text-decoration: none;
}

.menu-title {
  display: none;
}

.menu-title {
  text-align: right;
}

.menu-title span {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.menu-title {
  color: #666666;
}

.menu-title span {
  display: inline-block;
}

.menu-title {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.4px;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.top-nav-wrap {
  text-align: center;
}

.menu-fold-icon .fa {
  width: 45px;
  height: 45px;
  line-height: 45px;
  margin-top: 10px;
}

.menu-fold-icon .fa {
  background-color: #ffffff;
  color: #686868;
}

.menu-fold-icon .fa:hover {
  background-color: #ffffff;
  color: #222222;
}

.menu-fold-icon .fa {
  font-size: 28px;
}

.admin-bar .top-nav-container {
  padding-top: 32px;
}

.top-nav-container {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.top-nav-close {
  color: #3a3a3a;
}

.top-nav-close:hover {
  border: 1px solid #3a3a3a;
}

.top-nav-outer {
  background-color: rgba(255, 255, 255, 0.9);
}

.main-nav li,
.top-nav > li {
  text-align: right;
}

.main-nav li a,
.top-nav > li > a {
  display: block;
}

.top-nav {
  text-align: center;
}

.main-nav li a,
.top-nav > li > a,
.top-nav-vertical li a {
  padding-top: 0px;
  padding-left: 8px;
  padding-bottom: 0px;
  padding-right: 11px;
}

.main-nav li,
.top-nav > li,
.top-nav-vertical li {
  padding-top: 17px;
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 4px;
}

.main-nav li a,
.top-nav > li > a,
.top-nav-vertical li a,
.mobile-nav li a {
  background-color: rgba(255, 255, 255, 0);
  color: #3a3a3a;
}

.mobile-nav li a {
  color: #3a3a3a;
}

.main-nav .sub-menu li a {
  background-color: rgba(0, 0, 0, 0);
}

.main-nav li a:hover,
.top-nav > li > a:hover,
.top-nav-vertical li a:hover,
.mobile-nav li a:hover,
.main-nav li.current-menu-item > a,
.main-nav li.current-menu-parent > a,
.top-nav-vertical li.current-menu-item a,
.top-nav > li.current-menu-item > a,
.top-nav > li.current-menu-parent > a,
.top-nav > li.current-menu-ancestor > a {
  background-color: rgba(255, 255, 255, 0);
  color: var(--main-color);
  border-color: #333333;
}

.mobile-nav li a:hover,
.mobile-nav li.current-menu-item > a {
  color: var(--main-color);
}

.main-nav li a,
.top-nav > li > a,
.top-nav-vertical li a {
  border: none;
}

.main-nav li a,
.top-nav li a {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 13px;
  line-height: 27px;
  letter-spacing: 1px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.main-nav .sub-menu li a,
.top-nav .sub-menu li a {
  font-size: 12px;
}

.top-nav-vertical .sub-menu li a {
  font-size: 10px;
}

.mobile-nav li a {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
}

.top-nav.top-nav-horizontal .sub-menu-wrap {
  width: 170px;
}

.top-nav.top-nav-horizontal .sub-menu .sub-menu-wrap {
  right: 170px;
}

.top-nav.top-nav-horizontal .sub-menu li a {
  padding-top: 7px;
  padding-right: 25px;
  padding-bottom: 8px;
  padding-left: 25px;
}

.top-nav.top-nav-horizontal > li > .sub-menu-wrap {
  padding-top: 31px;
}

.top-nav.top-nav-horizontal .sub-menu li a {
  background-color: #ffffff;
  color: #8d8d8d;
}

.top-nav.top-nav-horizontal .sub-menu li a:hover,
.top-nav.top-nav-horizontal .sub-menu li.current-menu-item > a,
.top-nav.top-nav-horizontal .sub-menu li.current-menu-parent > a,
.top-nav.top-nav-horizontal .sub-menu li.current-menu-ancestor > a {
  background-color: var(--main-color);
  color: #ffffff;
}

.top-nav.top-nav-horizontal .sub-menu li a {
  border-bottom: 1px solid #f2f2f2;
}

.top-nav.top-nav-horizontal .sub-menu {
  border-top: 3px solid #3a3a3a;
}

.m-nav-fold i {
  background-color: whitesmoke;
  color: #222222;
}

.m-nav-fold i {
  font-size: 30px;
  line-height: 60px;
}

.filters-title {
  display: none;
}

.filters-title {
  text-align: right;
}

.filters-title span {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.filters-title {
  color: #e0e0e0;
}

.filters-title span {
  display: inline-block;
}

.filters-title {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.4px;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.filters {
  text-align: right;
}

.filters li a {
  display: block;
}

.filters li a i:first-child {
  margin-left: 10px;
}

.filters li a i:last-child {
  margin-right: 10px;
}

.filters li a i:first-child {
  display: none;
}

.filters li a i:last-child {
  display: inline-block;
}

.filters li a {
  padding-top: 9px;
  padding-right: 6px;
  padding-bottom: 9px;
  padding-left: 6px;
}

.filters li {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 16px;
  padding-left: 0px;
  display: inline-block;
}

.sidebar-top .filters {
  background-color: rgba(250, 250, 250, 0);
}

.filters li a {
  background-color: rgba(255, 255, 255, 0);
  color: #a6a6a6;
}

.filters li a:hover,
.filters li a.active-filter-item {
  background-color: rgba(229, 174, 71, 0);
  color: var(--main-color);
  border-color: #e0e0e0;
}

.filters li a:hover i.fa-royal-vbar,
.filters li a.active-filter-item i.fa-royal-vbar,
.filters li a:hover i.fa-royal-slash,
.filters li a.active-filter-item i.fa-royal-slash {
  color: #a6a6a6;
}

.filters li a {
  border: none;
}

.filters li a {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: 1px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.page-header {
  padding-top: 25px;
  padding-right: 0px;
  padding-bottom: 25px;
  padding-left: 0px;
}

.page-header {
  background-color: rgba(250, 250, 250, 0);
  background-image: none;
  background-size: auto;
  background-attachment: scroll;
  background-repeat: repeat;
  background-position: right top;
}

.page-header {
  border: none;
}

.page-header {
  text-align: center;
}

.page-header h1 {
  padding-bottom: 23px;
  margin-bottom: 24px;
}

.page-header h1 {
  color: #3a3a3a;
}

.page-header h1 {
  border-bottom: 1px solid #e0e0e0;
}

.page-header h1 {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 42px;
  line-height: 52px;
  letter-spacing: 5.6px;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.page-header p {
  text-align: center;
}

.page-header p {
  color: #3a3a3a;
}

.page-header p {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 3px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.page-header p {
  text-shadow: 0px 0px 0px #000000;
}

#blog-container {
  padding-top: 4px;
  padding-right: 0px;
  padding-bottom: 5px;
  padding-left: 0px;
}

.blog-grid-sizer,
.blog-post.post-width1x {
  width: -webkit-calc( (100% - 0px - 20.1px * 2) / 3);
  width: calc((100% - 0px - 40.2px) / 3);
}

.blog-post.post-width2x {
  width: -webkit-calc( ( (100% - 0px) * 2 / 3) - 20px / 3);
  width: calc((100% - 0px) * 2 / 3 - 6.6666666667px);
}

#blog-container {
  background-color: rgba(255, 255, 255, 0);
}

#blog-container {
  border: none;
}

.blog-post .post-media-wrap {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.blog-post .post-text-wrap {
  padding-top: 25px;
  padding-right: 30px;
  padding-bottom: 34px;
  padding-left: 30px;
}

.blog-post {
  background-color: white;
}

.blog-post:nth-child(2n) {
  background-color: white;
}

.blog-post .post-description,
.blog-post .before-cats {
  color: #8d8d8d;
}

.blog-post .time-and-author {
  color: #8d8d8d;
}

.blog-post .post-text-wrap a,
.blog-post .social-share-wrap i,
.blog-post .likes-and-comments .meta-sep,
.blog-post .post-categories {
  color: var(--main-color);
}

.blog-post .post-text-wrap a:hover,
.blog-post .social-share-wrap i:hover {
  color: #3a3a3a;
}

.blog-post {
  border: none;
}

.blog-post {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

.blog-post .post-title {
  text-align: right;
}

.blog-post .post-title a {
  padding-bottom: 0px;
  margin-bottom: 8px;
}

.blog-post .post-title a {
  color: #3a3a3a;
}

.blog-post .post-title a:hover {
  color: #3a3a3a;
}

.blog-post .post-title a {
  display: block;
}

.blog-post .post-title a {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 21px;
  line-height: 26px;
  letter-spacing: 1px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.blog-post .post-categories {
  text-align: right;
}

.blog-post .post-cats-in {
  padding-bottom: 0px;
  margin-bottom: 16px;
}

.blog-post .post-cats-in {
  display: inline-block;
}

.blog-post .post-cats-in {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.blog-post .time-and-author {
  display: none;
}

.blog-post .post-date {
  display: none;
}

.blog-post .posted-by {
  display: none;
}

.blog-post .time-and-author .meta-sep {
  display: none;
}

.blog-post .time-and-author {
  text-align: right;
}

.blog-post .time-and-author {
  padding-bottom: 0px;
  margin-bottom: 6px;
}

.blog-post .time-and-author {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 1px;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.blog-post .post-description {
  text-align: right;
}

.blog-post .post-description {
  padding-bottom: 9px;
  margin-bottom: 14px;
}

.blog-post .post-description {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 13px;
  line-height: 25px;
  letter-spacing: 0px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.blog-post .likes-and-comments {
  display: none;
}

.blog-post .social-share a:nth-child(5) {
  display: none;
}

.blog-post .social-share a:nth-child(6) {
  display: none;
}

.blog-post .social-share a:nth-child(7) {
  display: none;
}

.blog-post .likes-and-comments {
  float: right;
}

.blog-post .likes-and-comments {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 13px;
  line-height: 21px;
  letter-spacing: 0px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.blog-post .read-more-wrap {
  float: left;
}

.blog-post .read-more {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.blog-post .post-text-wrap .read-more {
  background-color: rgba(255, 255, 255, 0);
  color: #8d8d8d;
}

.blog-post .post-text-wrap .read-more:hover {
  background-color: rgba(255, 255, 255, 0);
  color: #3a3a3a;
  border-color: #111111;
}

.blog-post .read-more {
  border: none;
}

.blog-post .read-more {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.blog-post .read-more {
  text-decoration: none;
}

.blog-post .post-media .image-overlay {
  -webkit-transition: opacity 500ms ease 0s, background-color 500ms ease 0s;
  transition: opacity 500ms ease 0s, background-color 500ms ease 0s;
}

.blog-post .post-media .image-overlay .fa {
  color: #ffffff;
}

.blog-post .post-media .image-overlay {
  background-color: rgba(255, 255, 255, 0.1);
}

.blog-post .post-media .image-overlay .fa {
  font-size: 16px;
}

.link-and-quote {
  padding-top: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
  padding-left: 5%;
}

.link-and-quote,
.link-and-quote small a {
  color: #3a3a3a;
}

.link-and-quote p,
.link-and-quote small {
  background-color: rgba(255, 255, 255, 0.9);
}

.link-and-quote {
  font-family: "Bree Serif", Arial, "Roboto", sans-serif;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.link-and-quote small a {
  text-decoration: none;
}

.blog-single-header .title-and-meta {
  text-align: right;
}

.blog-single-header .posted-by {
  display: none;
}

.single-post .single-socials-wrap {
  width: -webkit-calc(100% - 50px);
  width: calc(100% - 50px);
  line-height: 25px;
}

.hide-single-sharing-b.single-post .single-socials-wrap {
  height: 25px;
}

.single-post.sharing-nxt-prev-b .single-post-sharing .previous-post,
.single-post.sharing-nxt-prev-b .single-post-sharing .next-post {
  top: 0px;
}

.single-post .next-post,
.single-post .previous-post {
  width: 25px;
  height: 25px;
}

.single-post .next-post,
.single-post .previous-post {
  line-height: 25px;
}

.single-post .nxt-prev-post {
  margin-top: 10px;
}

.single-post .previous-post {
  margin-left: 9px;
}

.single-post .next-post,
.single-post .previous-post {
  background-color: rgba(255, 255, 255, 0);
  color: #8d8d8d;
}

.single-post .next-post:hover,
.single-post .previous-post:hover {
  background-color: rgba(85, 85, 85, 0);
  color: #3a3a3a;
  border-color: #555555;
}

.single-post .next-post,
.single-post .previous-post {
  font-size: 17px;
}

.blog-single .single-socials-wrap a:nth-child(1) {
  display: none;
}

.blog-single .single-socials-wrap a:nth-child(6) {
  display: none;
}

.blog-single .single-socials-wrap a:nth-child(7) {
  display: none;
}

.blog-single .single-socials-wrap {
  text-align: center;
}

.blog-single .single-post-sharing {
  margin-top: 22px;
  padding-top: 0px;
}

#portfolio-container {
  padding-top: 4px;
  padding-right: 0px;
  padding-bottom: 5px;
  padding-left: 0px;
}

.portfolio-grid-sizer,
.portfolio-post.post-width1x {
  width: -webkit-calc( (100% - 0.1px - 0px - 20.1px * 2) / 3);
  width: calc((100% - 0.1px - 0px - 40.2px) / 3);
}

.portfolio-post.post-width2x {
  width: -webkit-calc( ( (100% - 0.1px - 0px) * 2 / 3) - 20px / 3);
  width: calc((100% - 0.1px - 0px) * 2 / 3 - 6.6666666667px);
}

@media screen and (max-width: 950px) {
  .portfolio-grid-sizer,
.portfolio-post.post-width1x,
.portfolio-post.post-width2x {
    width: 100%;
  }
}
#portfolio-container {
  background-color: rgba(255, 255, 255, 0);
}

#portfolio-container {
  border: none;
}

.portfolio-post .post-text-wrap {
  padding-top: 19px;
  padding-right: 25px;
  padding-bottom: 19px;
  padding-left: 25px;
}

.portfolio-post {
  background-color: #fff;
}

.portfolio-post .post-description,
.portfolio-post .before-cats,
.portfolio-post .testimonial-wrap {
  color: #8d8d8d;
}

.portfolio-post .time-and-author {
  color: #8d8d8d;
}

.portfolio-post a,
.portfolio-post .social-share-wrap i,
.portfolio-post .likes-and-comments .meta-sep,
.portfolio-post .post-categories {
  color: #8d8d8d;
}

.portfolio-post a:hover,
.portfolio-post .social-share-wrap i:hover {
  color: #3a3a3a;
}

.portfolio-post {
  border: none;
}

.portfolio-post {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

.media-hovers {
  -webkit-transition: all 500ms ease 0s;
  transition: all 500ms ease 0s;
}

.portfolio-post .post-media-wrap {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.portfolio-post .post-media-wrap .media-hovers {
  padding-top: 3.5%;
  padding-right: 3.5%;
  padding-bottom: 3.5%;
  padding-left: 4.1%;
}

.portfolio-post .media-hovers {
  background-color: rgba(255, 255, 255, 0);
  background-image: none;
  background-size: auto;
  background-attachment: scroll;
  background-repeat: repeat;
  background-position: left top;
}

.portfolio-post .post-media-in-wrap {
  border: none;
}

.portfolio-post .post-title {
  text-align: right;
}

.portfolio-post .post-title a {
  padding-bottom: 0px;
  margin-bottom: 9px;
}

.portfolio-post .post-title a {
  color: #444;
}

.portfolio-post .post-title a:hover {
  color: #444;
}

.portfolio-post .post-title a {
  display: block;
}

.portfolio-post .post-title a {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 17px;
  line-height: 23px;
  letter-spacing: 0.5px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.portfolio-post .post-categories {
  text-align: right;
}

.portfolio-post .post-cats-in {
  padding-bottom: 0px;
  margin-bottom: 10px;
}

.portfolio-post .post-cats-in {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1px;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.portfolio-post .time-and-author {
  display: none;
}

.portfolio-post .posted-by {
  display: none;
}

.portfolio-post .time-and-author .meta-sep {
  display: none;
}

.portfolio-post .time-and-author {
  text-align: right;
}

.portfolio-post .time-and-author {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.portfolio-post .time-and-author {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.5px;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.portfolio-post .post-description {
  display: none;
}

.portfolio-post .post-description {
  text-align: right;
}

.portfolio-post .post-description {
  padding-bottom: 16px;
  margin-bottom: 0px;
}

.portfolio-post .post-description {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 13px;
  line-height: 25px;
  letter-spacing: 0px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.portfolio-post .post-comments-wrap {
  display: none;
}

.portfolio-post .social-share a:nth-child(4) {
  display: none;
}

.portfolio-post .social-share a:nth-child(5) {
  display: none;
}

.portfolio-post .social-share a:nth-child(6) {
  display: none;
}

.portfolio-post .social-share a:nth-child(7) {
  display: none;
}

.portfolio-post .likes-and-comments {
  float: right;
}

.portfolio-post .likes-and-comments {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: 0px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.portfolio-post .more-info-wrap {
  float: left;
}

.portfolio-post .more-info {
  padding-top: 2px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.portfolio-post .more-info {
  background-color: rgba(255, 255, 255, 0);
  color: #8d8d8d;
}

.portfolio-post .more-info:hover {
  background-color: rgba(255, 255, 255, 0);
  color: var(--main-color);
  border-color: #111111;
}

.portfolio-post .more-info {
  border: none;
}

.portfolio-post .more-info {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.portfolio-post .more-info {
  text-decoration: none;
}

.portfolio-post .testimonial-wrap {
  text-align: right;
}

.portfolio-post .testimonial-wrap {
  padding-top: 15px;
  margin-top: 0px;
}

.portfolio-post .testimonial-wrap {
  border-top: 2px solid var(--main-color);
}

.portfolio-post .testimonial-wrap {
  font-family: "Open Sans", Arial, "Roboto", sans-serif;
  font-size: 13px;
  line-height: 19px;
  letter-spacing: 0.1px;
  font-weight: 300;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.portfolio-post .triangle-wrap {
  bottom: 0;
  border-top: none;
}

.portfolio-post .triangle-wrap {
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: white;
  border-right-width: 5px;
  border-right-style: solid;
  border-right-color: transparent;
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: transparent;
  left: 8%;
}

.portfolio-post .post-format-icon {
  top: 10px;
  right: 10px;
}

.portfolio-post .post-format-icon {
  width: 38px;
  height: 38px;
  line-height: 38px;
}

.portfolio-post .post-format-icon {
  background-color: white;
  color: #3d3d3d;
}

.portfolio-post .post-format-icon {
  border-radius: 50%;
}

.portfolio-post .post-format-icon {
  font-size: 16px;
}

.portfolio-post .image-overlay,
.portfolio-post .image-overlay .fa {
  -webkit-transition: opacity 400ms ease 0s, background-color 400ms ease 0s;
  transition: opacity 400ms ease 0s, background-color 400ms ease 0s;
}

.portfolio-post .post-media-in-wrap:hover img {
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}

.portfolio-post .post-media img {
  -webkit-transition: -webkit-transform 600ms ease 0s;
  transition: transform 600ms ease 0s;
}

.portfolio-post .image-overlay {
  background-color: rgba(255, 255, 255, 0);
}

.portfolio-post .post-media:hover .image-overlay {
  background-color: rgba(255, 255, 255, 0);
}

.portfolio-post .image-overlay .fa {
  color: #fcfcfc;
}

.portfolio-post .image-overlay .fa {
  font-size: 20px;
}

.portfolio-single-header .title-and-meta {
  text-align: right;
}

.portfolio-single-header .post-date {
  display: none;
}

.portfolio-single-header .post-categories {
  display: none;
}

.portfolio-single-header .post-comments-wrap {
  display: none;
}

.portfolio-single-header .posted-by {
  display: none;
}

.single-royal_portfolio .single-socials-wrap {
  width: -webkit-calc(100% - 50px);
  width: calc(100% - 50px);
  line-height: 25px;
}

.project-info-sharing.single-royal_portfolio .single-socials-wrap,
.hide-single-sharing-p.single-royal_portfolio .single-socials-wrap {
  height: 25px;
}

.single-royal_portfolio.sharing-nxt-prev-p .single-post-sharing .previous-post,
.single-royal_portfolio.sharing-nxt-prev-p .single-post-sharing .next-post {
  top: 38px;
}

.single-royal_portfolio .next-post,
.single-royal_portfolio .previous-post {
  width: 25px;
  height: 25px;
}

.single-royal_portfolio .next-post,
.single-royal_portfolio .previous-post {
  line-height: 25px;
}

.single-royal_portfolio .nxt-prev-post {
  margin-top: 10px;
}

.single-royal_portfolio .previous-post {
  margin-right: 9px;
}

.single-royal_portfolio .next-post,
.single-royal_portfolio .previous-post {
  background-color: rgba(255, 255, 255, 0);
  color: #8d8d8d;
}

.single-royal_portfolio .next-post:hover,
.single-royal_portfolio .previous-post:hover,
.single-royal_portfolio .portfolio-single .no-nxt-prev {
  background-color: rgba(85, 85, 85, 0);
  color: #3a3a3a;
  border-color: #555555;
}

.single-royal_portfolio .next-post,
.single-royal_portfolio .previous-post {
  font-size: 17px;
}

.info-sharing {
  display: none;
}

.portfolio-single .single-socials-wrap a:nth-child(1),
.info-sharing a:nth-child(1) {
  display: none;
}

.portfolio-single .single-socials-wrap a:nth-child(6),
.info-sharing a:nth-child(6) {
  display: none;
}

.portfolio-single .single-socials-wrap a:nth-child(7),
.info-sharing a:nth-child(7) {
  display: none;
}

.portfolio-single .single-socials-wrap {
  text-align: center;
}

.portfolio-single .single-post-sharing {
  margin-top: 13px;
  padding-top: 38px;
}

.proj-info-title {
  text-align: right;
}

.project-info .project-details strong i {
  display: none;
}

.project-info-right .project-info,
.project-info-below-right .project-info {
  width: 260px;
  margin-left: -webkit-calc(100% - 260px);
  margin-left: calc(100% - 260px);
}

.project-info-right.single-royal_portfolio .single-wrap,
.project-info-below-right.single-royal_portfolio .single-content-wrap,
.project-info-below-right.single-header-below-p .portfolio-single-header {
  width: -webkit-calc(100% - 300px);
  width: calc(100% - 300px);
}

.project-details > li {
  padding-top: 9px;
  padding-bottom: 9px;
}

.project-info {
  border: none;
}

.project-details > li {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.slideshow-caption {
  width: auto;
  text-align: center;
}

.slideshow-caption {
  top: 0;
}

.slideshow-caption {
  padding-top: 8px;
  padding-right: 20px;
  padding-bottom: 8px;
  padding-left: 20px;
}

.slideshow-caption {
  background-color: #3a3a3a;
  color: #ffffff;
}

.stacked-caption span {
  display: none;
}

.stacked-caption {
  text-align: center;
}

.stacked-caption {
  margin-bottom: 16px;
}

.gallery-slideshow .gallery-slide:last-of-type .stacked-caption {
  margin-bottom: 0;
}

.gallery-nav {
  text-align: right;
}

.gallery-nav {
  margin-top: -21px;
}

.gallery-nav {
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
}

.gallery-nav span {
  width: 16px;
  height: 5px;
  font-size: 5px;
  margin-right: 5px;
}

.gallery-nav {
  background-color: rgba(229, 174, 71, 0.9);
}

.gallery-nav span {
  background-color: #222222;
}

.gallery-nav span:hover,
.gallery-slideshow .cycle-pager-active {
  background-color: #ffffff;
}

.gallery-arrow {
  opacity: 1;
}

.gallery-arrow {
  width: 35px;
  height: 35px;
  line-height: 35px;
  margin-top: -17.5px;
}

.gallery-arrow {
  background-color: #e5ae47;
  color: #ffffff;
}

.gallery-arrow {
  font-size: 12px;
}

.lightbox-overlay .image-overlay .fa {
  color: #fcfcfc;
}

.lightbox-overlay .image-overlay {
  background-color: rgba(255, 255, 255, 0.1);
}

.lightbox-overlay .image-overlay .fa {
  font-size: 22px;
}

.royal-gallery .gallery-item {
  margin-right: 10px;
  margin-bottom: 10px;
}

.gallery-columns-2 .gallery-item {
  width: -webkit-calc((100% - (10px * 1)) / 2);
  width: calc((100% - 10px) / 2);
}

.gallery-columns-3 .gallery-item {
  width: -webkit-calc((100% - (10px * 2)) / 3);
  width: calc((100% - 20px) / 3);
}

.gallery-columns-4 .gallery-item {
  width: -webkit-calc((100% - (10px * 3)) / 4);
  width: calc((100% - 30px) / 4);
}

.gallery-columns-5 .gallery-item {
  width: -webkit-calc((100% - (10px * 4)) / 5);
  width: calc((100% - 40px) / 5);
}

.gallery-columns-6 .gallery-item {
  width: -webkit-calc((100% - (10px * 5)) / 6);
  width: calc((100% - 50px) / 6);
}

.gallery-columns-7 .gallery-item {
  width: -webkit-calc((100% - (10px * 6)) / 7);
  width: calc((100% - 60px) / 7);
}

.gallery-columns-8 .gallery-item {
  width: -webkit-calc((100% - (10px * 7)) / 8);
  width: calc((100% - 70px) / 8);
}

.gallery-columns-9 .gallery-item {
  width: -webkit-calc((100% - (10px * 8)) / 9);
  width: calc((100% - 80px) / 9);
}

@media screen and (min-width: 950px) {
  .gallery-columns-2 .gallery-item:nth-child(2n+2),
.gallery-columns-3 .gallery-item:nth-child(3n+3),
.gallery-columns-4 .gallery-item:nth-child(4n+4),
.gallery-columns-5 .gallery-item:nth-child(5n+5),
.gallery-columns-6 .gallery-item:nth-child(6n+6),
.gallery-columns-7 .gallery-item:nth-child(7n+7),
.gallery-columns-8 .gallery-item:nth-child(8n+8),
.gallery-columns-9 .gallery-item:nth-child(9n+9) {
    margin-right: 0 !important;
  }

  .gallery-columns-2 .gallery-item:nth-child(2n+2) + li,
.gallery-columns-3 .gallery-item:nth-child(3n+3) + li,
.gallery-columns-4 .gallery-item:nth-child(4n+4) + li,
.gallery-columns-5 .gallery-item:nth-child(5n+5) + li,
.gallery-columns-6 .gallery-item:nth-child(6n+6) + li,
.gallery-columns-7 .gallery-item:nth-child(7n+7) + li,
.gallery-columns-8 .gallery-item:nth-child(8n+8) + li,
.gallery-columns-9 .gallery-item:nth-child(9n+9) + li {
    clear: both;
  }
}
@media screen and (max-width: 950px) {
  .royal-gallery .gallery-item {
    width: -webkit-calc((100% - (10px * 1)) / 2) !important;
    width: calc((100% - 10px) / 2) !important;
  }

  .royal-gallery .gallery-item:nth-child(2n+2) {
    margin-right: 0 !important;
  }
}
@media screen and (max-width: 480px) {
  .royal-gallery .gallery-item {
    width: 100% !important;
    float: none !important;
  }
}
.jcarousel-wrap {
  padding-left: 0px;
  padding-right: 0px;
}

.jcarousel li {
  padding: 0 5px;
}

.jcarousel-prev {
  left: 5px;
}

.jcarousel-next {
  right: 5px;
}

.similar-items h3 {
  text-align: right;
}

.similar-items h3 span {
  padding-bottom: 14px;
  margin-bottom: 40px;
}

.similar-items h3 span {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.jcarousel-prev,
.jcarousel-next {
  display: none;
}

.jcarousel-prev .fa,
.jcarousel-next .fa {
  width: 35px;
  height: 35px;
  line-height: 35px;
}

.jcarousel-prev,
.jcarousel-next {
  margin-top: -17.5px;
}

.jcarousel-prev .fa,
.jcarousel-next .fa {
  background-color: #e5ae47;
  color: #ffffff;
}

.jcarousel-prev:hover .fa,
.jcarousel-next:hover .fa {
  background-color: #e5ae47;
  color: #3a3a3a;
  border-color: #e0e0e0;
}

.jcarousel-prev .fa,
.jcarousel-next .fa {
  font-size: 12px;
}

.jcarousel .image-overlay-wrap .image-overlay {
  background-color: rgba(255, 255, 255, 0.1);
}

.jcarousel .image-overlay-wrap h5 {
  background-color: var(--main-color);
  color: #fcfcfc;
}

.jcarousel .image-overlay-wrap .image-overlay {
  opacity: 1;
}

.jcarousel .image-overlay-wrap:hover .image-overlay {
  opacity: 0;
}

.comments-area-wrap {
  max-width: 940px;
}

.comments-area {
  padding-bottom: 26px;
  margin-bottom: 29px;
}

.comments-area {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.comments-area-wrap .comments-count {
  text-align: right;
}

.comments-area-wrap .comments-count span {
  padding-bottom: 14px;
  margin: 30px 0;
}

.comments-area-wrap .comments-count span {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.comment-content-wrap {
  margin-right: 75px;
}

.children .comment-content-wrap {
  margin-right: 72px;
}

.comment-author-img {
  border-radius: 3%;
}

.comment-content-wrap {
  padding-top: 26px;
  padding-right: 30px;
  padding-bottom: 23px;
  padding-left: 30px;
}
.comment-content-wrap header {
  padding-top: 10px;
}
.comment-content-wrap .comment-content {
  padding: 0 16px;
}

.comment,
.pingback,
.comments-wrap #respond {
  margin-bottom: 30px;
}

.comment-content-wrap {
  background-color: #fff;
}

.bypostauthor .comment-content-wrap {
  background-color: #fff;
}

.comment-content-wrap {
  border: none;
}

.comment-content-wrap {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

.comments-area-wrap .comment-reply-title {
  padding-bottom: 0px;
  margin-bottom: 3px;
}

.comments-area-wrap .comment-reply-title {
  display: inline-block;
}

.pers-name {
  float: left;
  margin-right: 15px;
}

.pers-name,
.pers-email {
  width: -webkit-calc(50% - 7.5px);
  width: calc(50% - 7.5px);
}

.rf-input {
  padding-top: 9px;
  padding-right: 9px;
  padding-bottom: 9px;
  padding-left: 9px;
}

.rf-input,
.form-submit {
  margin-bottom: 15px;
}

.inner-content input[type=text].rf-input {
  height: 43px;
}

.inner-content textarea.rf-input {
  height: 218px;
}

.rf-input {
  background-color: #ffffff;
}

.rf-input {
  color: #8d8d8d;
}

.rf-error,
.mail-error-txt {
  color: var(--main-color);
  border-color: var(--main-color) !important;
}

.rf-input:focus {
  background-color: #ffffff;
  border-color: #8d8d8d;
}

.rf-input:focus {
  color: #8d8d8d;
}

.rf-input {
  border: none;
}

.rf-input {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1) inset;
}

.form-submit {
  text-align: right;
}

.submit-btn {
  width: auto;
}

.submit-btn {
  padding-top: 7px;
  padding-right: 10px;
  padding-bottom: 7px;
  padding-left: 10px;
}

.submit-btn {
  background-color: var(--main-color);
  color: #ffffff;
}

.submit-btn:hover {
  background-color: rgba(var(--main-color-rgb), 90%);
  color: #fcfcfc;
  border-color: #555555;
}

.submit-btn {
  border: none;
}

.submit-btn {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

#s {
  padding-top: 14px;
  padding-right: 14px;
  padding-bottom: 14px;
  padding-left: 14px;
}

#s {
  padding-right: 29px;
}

.search-icon {
  top: 23px;
  right: 14px;
}

.widget_flickr > div {
  margin-top: 9px;
}

.widget_lsi_widget > ul {
  margin-top: 9px !important;
}

.search-wrap {
  padding-top: 9px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#s {
  background-color: #3a3a3a;
}

#s,
.search-icon {
  color: #ffffff;
}

#s:focus {
  background-color: #595959;
  border-color: #111111;
}

#s:focus,
#s:focus + .search-icon {
  color: #fcfcfc;
}

#s {
  border: none;
}

.pagination-wrap {
  padding-top: 47px;
  padding-right: 0px;
  padding-bottom: 28px;
  padding-left: 0px;
}

.pagination-wrap {
  background-color: rgba(255, 255, 255, 0);
}

.pagination-wrap {
  border: none;
}

.pagination-wrap {
  text-align: center;
}

.pagination-wrap a,
.pagination-wrap span {
  padding: 14px;
  margin-right: 5px;
}

.pagination-wrap a {
  background-color: #e5ae47;
  color: #ffffff;
}

.pagination-wrap a:hover,
.pagination-wrap .current {
  background-color: #cb9b3f;
  color: #fcfcfc;
  border-color: #666666;
}

.pagination-wrap a,
.pagination-wrap span {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}

.pagination-wrap a,
.pagination-wrap span {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 1.9px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.pagination-wrap a,
.pagination-wrap span {
  text-decoration: none;
}

.contact-info ul li {
  text-align: right;
}

.contact-form,
.contact-info {
  float: left;
  width: -webkit-calc(50% - 25px);
  width: calc(50% - 25px);
}

.contact-form {
  margin-right: 50px;
}

.contact-info ul li span {
  padding: 11px 0;
}

.contact-info ul li span {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.contact-info ul li span {
  display: block;
}

.contact-title {
  text-align: right;
}

.contact-title span {
  padding-bottom: 9px;
  margin-bottom: 39px;
}

.contact-title span {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.contact-title span {
  display: block;
}

.google-map {
  height: 450px;
}

.copy-and-soc > div {
  padding-top: 45px;
  padding-right: 0px;
  padding-bottom: 60px;
  padding-left: 0px;
}

.copy-and-soc {
  background-color: #393939;
}

.footer-fold-btn i {
  background-color: #ffffff;
  color: #666666;
}

.copy-and-soc {
  border-top: 1px solid #e0e0e0;
  border-right: 0px solid #e0e0e0;
  border-bottom: 0px solid #e0e0e0;
  border-left: 0px solid #e0e0e0;
}

.copy-and-soc {
  text-align: center;
}

.socials-wrap .fa {
  width: 38px;
  height: 38px;
  line-height: 38px;
  margin-right: 7px;
  margin-bottom: 0px;
}

.socials-wrap {
  padding-bottom: 0px;
  margin-bottom: 18px;
}

.socials-wrap .fa {
  background-color: #f4f4f4;
  color: #3a3a3a;
}

.socials-wrap .fa:hover {
  background-color: #e5ae47;
  color: #3a3a3a;
  border-color: #3a3a3a;
}

.socials-wrap .fa {
  border: none;
}

.socials-wrap .fa {
  border-radius: 50%;
}

.socials-wrap {
  display: inline-block;
}

.copy-and-soc .fa {
  font-size: 15px;
}

.copyright-wrap p {
  text-align: center;
}

.copyright-wrap p {
  color: #9c9c9c;
}

.copyright-wrap p a {
  color: #9c9c9c;
}

.copyright-wrap p a:hover {
  color: var(--main-color);
}

.copyright-wrap p {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 0.5px;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.copyright-wrap p a {
  text-decoration: underline;
}

.back-to-top .fa {
  width: 45px;
  height: 42px;
  line-height: 42px;
}

.back-to-top {
  right: 16px;
  bottom: 93px;
}

.back-to-top .fa {
  background-color: #525252;
  color: #ffffff;
}

.back-to-top .fa:hover {
  background-color: #555555;
  color: #fcfcfc;
}

.back-to-top .fa {
  font-size: 13px;
}

.inner-content p,
.inner-content table,
.inner-content pre,
.inner-content blockquote,
.inner-content address,
.inner-content .wp-playlist,
.comment-content p,
.single-meta,
.project-description-wrap p,
.project-details-wrap > ul,
.single .gallery,
.inner-content.wp-caption,
.inner-content ul,
.inner-content ol,
.inner-content dl dd,
.single-content h1,
.single-content h2,
.single-content h3,
.single-content h4,
.single-content h5,
.single-content h6,
.inner-content .su-note,
.inner-content .su-quote-style-default,
.inner-content .su-accordion,
.inner-content .su-custom-gallery,
.inner-content .su-box,
.inner-content .su-row,
.inner-content .su-spoiler,
.inner-content .su-carousel,
.inner-content .su-service,
.inner-content .su-slider,
.inner-content .su-table,
.inner-content .su-tabs,
.inner-content .su-expand,
.inner-content .su-pullquote,
.inner-content .su-button,
.inner-content .su-animate,
.inner-content .su-gmap,
.inner-content .su-feed,
.inner-content .su-video,
.inner-content .su-youtube,
.inner-content .su-list ul,
.inner-content .su-heading,
.inner-content .su-error,
.inner-content .su-dummy-image,
.inner-content .su-qrcode,
.inner-content .su-private,
.inner-content .su-column,
.inner-content .su-audio,
.inner-content .su-document,
.inner-content .su-post,
.search-results-wrap h4,
.search-query,
.project-info h3 {
  margin-bottom: 15px;
}

.stacked-caption span {
  margin: 15px 0;
}

[class*=single-header-below] .title-and-meta {
  padding-bottom: 15px;
}

.inner-content p,
.inner-content li,
.inner-content dt,
.inner-content dd,
.inner-content table,
.inner-content code,
.inner-content pre,
.inner-content address,
.inner-content tt,
.inner-content samp,
.inner-content kbd,
.inner-content var,
.inner-content .wp-caption-text,
.inner-content .single-meta,
.inner-content .single-tags,
.comment-reply-title small,
.inner-content .rf-input,
.slideshow-caption,
.stacked-caption span,
.comments-pagination,
.submit-btn,
.inner-content [class^=su-]:not([class$=-icon]):not(.su-dropcap) {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 13px;
  line-height: 25px;
  letter-spacing: 0px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.inner-content .single-meta,
.inner-content .single-tags,
.comment-reply-title small,
#cancel-comment-reply-link {
  font-size: 12px;
}

.vc_btn,
.vc_label,
.vc_pie_chart_value,
.pp_pic_holder .ppt,
.vc_gitem-post-data,
.wpb_accordion_header a,
.tagcloud a,
.inner-content .previous-post,
.inner-content .next-post,
.inner-content [class^=su-]:not([class$=-icon]),
.inner-content .wp-playlist,
.inner-content .qtip.su-qtip {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
}

.inner-content h1 {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 33px;
  line-height: 45px;
  letter-spacing: 0.5px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.inner-content h2 {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0.5px;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.inner-content h3 {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 18px;
  line-height: 36px;
  letter-spacing: 1px;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.inner-content h4 {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.5px;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.inner-content h5 {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 1px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.inner-content h6 {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.5px;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.sid-widget-title {
  text-align: left;
}

.sid-widget-title span {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.sid-widget-title,
.sid-widget-title a {
  color: #3a3a3a;
}

.sid-widget-title span {
  display: inline-block;
}

.sid-widget-title {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 1px;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.sidebar-widget {
  text-align: left;
}

.sidebar-widget > ul,
.sidebar-widget > div {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.sidebar-widget > ul,
.sidebar-widget > div {
  background-color: rgba(0, 0, 0, 0);
}

.sidebar-widget {
  color: #3a3a3a;
}

.tagcloud a,
.textwidget a,
.sidebar-widget ul li a,
.sidebar-widget tfoot tr td a,
.sidebar-widget tbody tr td a {
  color: #3a3a3a;
}

.tagcloud a:hover,
.textwidget a:hover,
.sidebar-widget ul li a:hover,
.sidebar-widget tfoot tr td a:hover,
.sidebar-widget tbody tr td a:hover {
  color: var(--main-color);
}

.sidebar-widget {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 15px;
  line-height: 25px;
  letter-spacing: 0px;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.sid-block #s {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 15px;
  line-height: 16px;
  letter-spacing: 0px;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.sid-block .search-icon {
  font-size: 15px;
}

.tagcloud a,
.textwidget a,
.sidebar-widget ul li a,
.sidebar-widget tfoot tr td a,
.sidebar-widget tbody tr td a {
  text-decoration: none;
}

@media screen and (min-width: 1050px) {
  .top-widget,
.footer-widget {
    width: -webkit-calc( (100% - ( 40px * 3)) / 4);
    width: calc((100% - 120px) / 4);
  }

  .top-widget:nth-child(4n),
.footer-widget:nth-child(4n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 1050px) {
  .top-widget,
.footer-widget {
    width: -webkit-calc( (100% - ( 40px)) / 2) !important;
    width: calc((100% - 40px) / 2) !important;
    margin-right: 40px !important;
  }

  .top-widget:nth-child(2n),
.footer-widget:nth-child(2n) {
    margin-right: 0 !important;
  }
}
@media screen and (max-width: 950px) {
  .top-widget,
.footer-widget {
    width: 100% !important;
    margin-right: 0 !important;
  }
}
.top-widgets,
.footer-widgets {
  padding-top: 40px;
  padding-right: 35px;
  padding-bottom: 19px;
  padding-left: 35px;
}

.top-widget,
.footer-widget {
  margin-right: 40px;
  margin-bottom: 40px;
}

@media screen and (max-width: 950px) {
  .top-widgets,
.footer-widgets {
    padding: 6.6666666667% 5.8333333333% 3.1666666667% 5.8333333333%;
  }
}
.top-widgets-bg,
.footer-widgets {
  background-color: #393939;
  background-image: none;
  background-size: auto;
  background-attachment: scroll;
  background-repeat: repeat;
  background-position: right top;
}

.top-widgets-fold-btn i {
  background-image: linear-gradient(225deg, #393939 50%, rgba(255, 255, 255, 0) 51%);
  color: #fcfcfc;
}

.footer-widgets {
  border: none;
}

.top-widget-title,
.foot-widget-title {
  text-align: right;
}

.top-widget-title span,
.foot-widget-title span {
  padding-bottom: 0px;
  margin-bottom: 10px;
}

.top-widget-title,
.top-widget-title a,
.foot-widget-title,
.foot-widget-title a {
  color: #fcfcfc;
}

.top-widget-title span,
.foot-widget-title span {
  display: inline-block;
}

.top-widget-title,
.foot-widget-title {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 1px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.top-widget,
.footer-widget {
  text-align: right;
}

.top-widget > ul,
.top-widget > div,
.footer-widget > ul,
.footer-widget > div {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.top-widget > ul,
.top-widget > div,
.footer-widget > ul,
.footer-widget > div {
  background-color: rgba(0, 0, 0, 0);
}

.top-widget,
.footer-widget {
  color: #fcfcfc;
}

.top-widget .tagcloud a,
.top-widget .textwidget a,
.top-widget ul li a,
.top-widget tfoot tr td a,
.top-widget tbody tr td a,
.footer-widget .tagcloud a,
.footer-widget .textwidget a,
.footer-widget ul li a,
.footer-widget tfoot tr td a,
.footer-widget tbody tr td a {
  color: #fcfcfc;
}

.top-widget .tagcloud a:hover,
.top-widget .textwidget a:hover,
.top-widget ul li a:hover,
.top-widget tfoot tr td a:hover,
.top-widget tbody tr td a:hover,
.footer-widget .tagcloud a:hover,
.footer-widget .textwidget a:hover,
.footer-widget ul li a:hover,
.footer-widget tfoot tr td a:hover,
.footer-widget tbody tr td a:hover {
  color: #8d8d8d;
}

.top-widget,
.footer-widget {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 15px;
  line-height: 33px;
  letter-spacing: 0.5px;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.top-widget #s,
.footer-widget #s {
  font-family: "Raleway", Arial, "Roboto", sans-serif;
  font-size: 15px;
  line-height: 16px;
  letter-spacing: 0.5px;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.top-widget .search-icon,
.footer-widget .search-icon {
  font-size: 15px;
}

.top-widget .tagcloud a,
.top-widget .textwidget a,
.top-widget ul li a,
.top-widget tfoot tr td a,
.top-widget tbody tr td a,
.footer-widget .tagcloud a,
.footer-widget .textwidget a,
.footer-widget ul li a,
.footer-widget tfoot tr td a,
.footer-widget tbody tr td a {
  text-decoration: none;
}

/* Theme-Specific CSS */
.testimonial-wrap strong {
  font-weight: 600;
}

.testimonial-wrap {
  margin-bottom: 10px;
}

.single .gallery-prev-slide,
.single .gallery-next-slide {
  display: none;
}

.contact-form {
  width: calc(65% - 22.5px);
}

.contact-info {
  width: calc(30% - 22.5px);
}

.top-nav .sub-menu li:last-child a {
  border-bottom: none;
}

.slick-dots li {
  padding: 3px !important;
}

#msform {
  width: 100%;
  text-align: center;
  background: transparent;
  box-shadow: none;
}
#msform fieldset {
  box-shadow: none;
  padding: 20px 30px;
  box-sizing: border-box;
  width: 93%;
  min-width: 300px;
  margin: 0 auto;
  position: relative;
  /*// General  Style*/
  /*Hide all except first fieldset*/
}
@media (max-width: 530px) {
  #msform fieldset {
    width: 100%;
    padding: 20px 0;
    margin: 0;
  }
}
#msform fieldset h2 {
  color: #777;
  margin-bottom: 60px;
}
#msform fieldset:not(:first-of-type) {
  display: none;
  background: #fff;
  box-shadow: none;
}
#msform fieldset .checkbox {
  text-align: right;
  max-width: 550px;
  margin: 5px auto;
}
#msform fieldset .checkbox label {
  width: 100%;
  padding: 7px 10px 9px !important;
  border: 1px solid #d5d5d5;
  border-radius: 5px;
}
#msform fieldset .checkbox label input[type=checkbox] {
  margin: 0 10px;
}
#msform fieldset .checkbox label .padding_checkbox {
  display: none !important;
}
#msform fieldset .action-button {
  width: 100px;
  background: var(--main-color);
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}
#msform fieldset .action-button:hover, #msform fieldset .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px var(--main-color);
}
#msform fieldset input[type=text],
#msform fieldset input[type=number] {
  padding: 0 15px;
}
#msform fieldset input[type=text].required-error,
#msform fieldset input[type=number].required-error {
  color: white;
  background-color: #ff8080;
}
#msform fieldset input[type=text]::placeholder,
#msform fieldset input[type=number]::placeholder {
  color: #999;
}
#msform fieldset textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  color: #2C3E50;
  font-size: 13px;
  margin-left: auto;
  margin-right: auto;
}
#msform fieldset .select-styled,
#msform fieldset .select-options {
  background-color: #fff;
  text-align: right;
}
#msform fieldset label {
  margin-bottom: 12px !important;
  margin-top: 2px !important;
}
#msform fieldset .formProgress {
  height: 0 !important;
}
#msform fieldset#start_fs {
  background: transparent;
  box-shadow: none;
  padding: 20px 30px;
  box-sizing: border-box;
  width: 93%;
  margin: 0 3%;
  position: relative;
}
#msform fieldset#start_fs > div .examType {
  background: #fafafa;
  height: 200px;
  padding: 10px;
  margin-top: 32px;
  border-radius: 5px;
  /*box-shadow: 0 0 9px -2px rgba(0, 0, 0, .25);*/
  transition: ease all 0.3s;
}
@media (max-width: 1700px) {
  #msform fieldset#start_fs > div .examType {
    height: 250px;
  }
}
@media (max-width: 240px) {
  #msform fieldset#start_fs > div .examType {
    height: 240px;
  }
}
#msform fieldset#start_fs > div .examType > span {
  height: 70px;
  display: block;
  position: relative;
  text-align: center;
  transition: ease all 0.3s;
}
#msform fieldset#start_fs > div .examType > span:before {
  position: absolute;
  top: -45px;
  width: 80px;
  height: 80px;
  padding: 14px 20px;
  font-size: 3em;
  border-radius: 15px;
  transition: ease all 0.3s;
  margin: 10px auto;
  left: auto !important;
  right: 11px;
  font-family: "Glyphicons Halflings";
  display: block;
  color: #fff;
}
#msform fieldset#start_fs > div .examType > span.next_to_qbq-icon:before {
  content: "\e085";
  background: linear-gradient(90deg, #41ddd0 0%, #3beeb0 100%);
}
#msform fieldset#start_fs > div .examType > span.next_to_classic-icon:before {
  content: "\e032";
  background: linear-gradient(90deg, #97b2fd 0%, #9ac5fd 100%);
}
#msform fieldset#start_fs > div .examType > span.next_to_attachment-icon:before {
  content: "\e025";
  background: linear-gradient(90deg, #fb9799 0%, #fdac98 100%);
}
#msform fieldset#start_fs > div .examType > span.next_to_import-icon:before {
  content: "\e169";
  background: linear-gradient(90deg, #e470c1 0%, #b657c3 100%);
}
#msform fieldset#start_fs > div .examType > span.next_to_offline_exam-icon:before {
  content: "\e017";
  background: linear-gradient(90deg, #707ce4 0%, #9f95dd 100%);
}
#msform fieldset#start_fs > div .examType > span.next_to_generate_exam-icon:before {
  content: "\e018";
  background: linear-gradient(90deg, #e0cd39 0%, #e8fa01 100%);
}
#msform fieldset#start_fs > div .examType > p {
  color: #777;
}
#msform fieldset#start_fs > div .examType:hover {
  box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.25);
}
#msform fieldset#start_fs > div .examType:hover span:before {
  transform: scale(1.1);
}
#msform fieldset#student_and_sections .alert-danger {
  display: none;
}
#msform fieldset#student_and_sections #tabbable {
  max-width: 550px;
  margin: 0 auto;
}
#msform fieldset#student_and_sections #tabbable .createExamTabs {
  margin-bottom: 10px;
}
#msform fieldset#student_and_sections #tabbable .createExamTabs .tab {
  border: 1px solid var(--main-color);
  border-radius: 20px;
  overflow: hidden;
  width: 49%;
  display: inline-block;
}
#msform fieldset#student_and_sections #tabbable .createExamTabs .tab > a {
  color: var(--main-color);
}
#msform fieldset#student_and_sections #tabbable .createExamTabs .tab > a:hover, #msform fieldset#student_and_sections #tabbable .createExamTabs .tab > a:focus {
  background-color: transparent;
}
#msform fieldset#student_and_sections #tabbable .createExamTabs .tab.active, #msform fieldset#student_and_sections #tabbable .createExamTabs .tab:hover, #msform fieldset#student_and_sections #tabbable .createExamTabs .tab:focus {
  background: var(--main-color);
  box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.25);
}
#msform fieldset#student_and_sections #tabbable .createExamTabs .tab.active > a, #msform fieldset#student_and_sections #tabbable .createExamTabs .tab:hover > a, #msform fieldset#student_and_sections #tabbable .createExamTabs .tab:focus > a {
  color: #fff;
}
#msform fieldset#student_and_sections #sections_well {
  max-width: 1000px;
  margin: 0 auto;
}
#msform fieldset#student_and_sections #sections_well #sections_list {
  border: 0;
}
#msform fieldset#student_and_sections #students_well {
  display: none;
  max-width: 1000px;
  margin: 0 auto;
}
#msform fieldset#student_and_sections #students_well h2[role=heading] {
  margin-bottom: 10px;
}
#msform fieldset#student_and_sections #students_well .widget.separated {
  border-color: #f3f3f3;
}
#msform fieldset#student_and_sections #students_well .widget.separated .widget-body {
  background-color: #fff;
}
#msform fieldset#student_and_sections #students_well .widget.separated .widget-body input[type=text] {
  min-height: 40px;
  background-color: #fff !important;
}
#msform fieldset#student_and_sections #students_well .widget.separated .widget-body #users_add_list {
  border-color: #f3f3f3;
}
#msform fieldset#student_and_sections #students_well .widget.separated .widget-body #users_add_list h2 a {
  color: var(--main-color);
}
#msform fieldset#student_and_sections #students_well .widget.separated .widget-body #users_add_list .input,
#msform fieldset#student_and_sections #students_well .widget.separated .widget-body #users_add_list div.checkbox {
  width: 98%;
  max-width: 100%;
}
#msform fieldset#student_and_sections #students_well .widget.separated .widget-body #users_add_list div.checkbox {
  border: 0;
  padding: 0;
}
#msform fieldset#student_and_sections #students_well .widget.separated .widget-body #users_add_list #student_to_count .input {
  width: 100%;
  display: inline-block;
  padding: 0;
}
@media (max-width: 1293px) {
  #msform fieldset#student_and_sections #students_well .widget.separated .widget-body #users_add_list #student_to_count .input {
    width: 100%;
    display: block;
    padding: 0;
  }
}
#msform fieldset#import_fs .form-group .ezdz-dropzone {
  margin: auto;
}
#msform fieldset#info_fs .alert-danger {
  display: none;
}
#msform fieldset#info_fs .form-group, #msform fieldset#info_fs #attach_mark {
  margin-bottom: 15px;
  padding-bottom: 0;
}
#msform fieldset#info_fs .checkbox {
  margin: 0;
}
#msform fieldset#info_fs .exam-outcome {
  margin-bottom: 20px;
  font-weight: bold;
}
#msform fieldset#info_fs .answer label {
  margin-top: 0;
}
#msform fieldset#info_fs .answer input[type=radio] {
  vertical-align: top;
}
#msform fieldset#options_fs .fieldset-container {
  margin: 0 auto;
  width: 550px;
  text-align: right;
}
#msform fieldset#options_fs .correct-answers {
  margin: 5px 15px 15px 15px;
}
#msform fieldset#options_fs .correct-answers .section-heading {
  font-weight: bold;
  margin-bottom: 10px;
}
#msform fieldset#options_fs input[type=radio] {
  vertical-align: top;
}
#msform fieldset.not_import .fieldset-container {
  width: 550px;
  margin: 0 auto;
}

.question img, #question_container img {
  max-width: 80% !important;
  height: auto !important;
}

.hotspotQBox img, #question_container .hotspotAttachment, .hotspotSubmisionBox .hotspotImage, .preview_hotspot_q_wrapper .hotspot_image {
  max-width: 100% !important;
  height: auto !important;
}

.hotspotQBox {
  padding: 0;
}

.ExamPreviewBox .fancy_link, #hotspot_container .fancy_link {
  display: block;
  padding: 8px;
  float: none;
}

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

.hotspotCanvasContainer {
  padding: 0 0;
  margin: 10px 0;
}

#AssignmentCreateForm input[type=radio], #AssignmentEditForm input[type=radio] {
  margin-top: 0;
}
#AssignmentCreateForm input[type=radio].publish_to, #AssignmentEditForm input[type=radio].publish_to {
  margin-right: 20px;
}
#AssignmentCreateForm .form-group, #AssignmentEditForm .form-group {
  padding-bottom: 0;
}
#AssignmentCreateForm hr.wide, #AssignmentEditForm hr.wide {
  margin: 0;
}

#student_to_count div.checkbox label {
  padding: 3px;
  display: flex;
  margin-bottom: 0px !important;
  height: 96%;
}

.multibleAnswers input[type=checkbox] {
  vertical-align: middle;
}

@media screen and (max-width: 1503px) {
  #question_container [qtype=mcq] .widget-body > table {
    width: 90% !important;
  }
}
#question_container .widget-body iframe {
  max-width: 100%;
}

@media screen and (max-width: 1503px) {
  .questionBody > table {
    width: 90% !important;
  }

  .questionBody iframe {
    max-width: 100%;
  }
}
#question_container [qtype=matching] canvas {
  max-width: 100% !important;
}

#subquestions_answers .matching_answer_colum {
  border-right: 1px solid #eee;
  text-align: center;
}

#question_container [qtype=mcq] .answer p {
  margin: 0 0;
}

.question table.dataTable, .question-box table.dataTable {
  width: 100% !important;
}

.disaibledExamsMask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 11111;
}

#question_container .widget {
  border: 1px solid #eee;
}
#question_container p, #question_container span {
  word-break: break-word;
}
#question_container [qtype=short] .answer {
  padding: 10px 0;
}
#question_container [qtype=mcq] .answer label {
  max-width: 84%;
}

.questionWidgetBox .question p, .question span {
  word-break: break-word;
}

.qn_next_btn {
  font-size: 16px;
}
.qn_next_btn .next_question_loader {
  display: inline-block;
  margin: 0 7px;
  vertical-align: middle;
}
.qn_next_btn .next_question_loader img {
  width: auto;
  height: 16px;
  display: block;
}

.bullseye_pic {
  width: 13px;
  background: #f250b0;
  border-radius: 50%;
  margin-left: -4px !important;
  margin-top: -4px !important;
}

@media screen and (max-width: 520px) {
  .finalsub_grade_submission {
    padding: 0;
  }
}
.questions.form .correct_answer_input.validationError {
  border: 1px solid #e5301c !important;
}
.questions.form .VlaidationErrorMessage {
  color: #e5301c;
  margin-top: 10px;
}

.pop_up_hint_exam {
  display: none;
  position: absolute;
  width: 280px;
  max-width: 100% !important;
  padding: 10px;
  background: rgba(var(--main-color-rgb), 90%);
  color: #ffffff;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 2px solid var(--main-color);
  font-size: 90%;
  right: 0 !important;
  left: auto !important;
  z-index: 11111111;
}

.smartMateAttachWrapper {
  display: flex;
  flex-wrap: wrap;
}
.smartMateAttachWrapper .one-line {
  border: 1px solid #eee;
  border-radius: 7px;
  text-align: center;
  flex-direction: column;
  padding: 20px;
  margin: 5px;
  width: 170px;
  max-width: 100%;
  min-height: 110px;
  background: #fafafa;
}
.smartMateAttachWrapper .one-line a {
  color: #444;
  line-height: 1.2;
}
.smartMateAttachWrapper .attach_icon {
  height: 50px;
  width: 50px;
  font-size: 1.8em;
  color: #fff;
  border-radius: 50%;
  background: var(--main-color);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  cursor: pointer;
}

.smartMateAttachmentsLabel {
  margin: 15px 5px 5px;
  padding-top: 14px;
  font-weight: 500;
  font-size: 16px;
}

.questionWidgetBox .questionBody .sub-question-box {
  padding: 10px 0;
  margin-bottom: 10px;
}
.questionWidgetBox .questionBody .sub-question-box .sub-question-title {
  padding-top: 8px;
}
.questionWidgetBox .questionBody .sub-question-box .questions_group .answer {
  margin-right: 0px;
  padding-right: 17px;
}

.question-box-wrapper-finalsub-grade table ol .answer {
  margin-right: 0px;
  padding-right: 17px;
}

.answer-status-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.answer-status-box i {
  font-size: 18px;
}
.answer-status-box span {
  margin-right: 5px;
}

.correct-answer-table p {
  margin: 0;
  display: inline-block;
}

#LecturesMarkSubmissionForm {
  width: 100%;
}

#LectureTeacherMarkSubmissionForm {
  background: transparent;
}

.question-box-wrapper-finalsub-grade .question table tr td:first-child {
  font-weight: 500 !important;
}

.final-subgrade-teacher-comments {
  background: #fff;
  border-radius: 7px;
  border: 1px solid #eee;
  border-top: 2px solid #ddd;
  padding: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-bottom: 20px;
}
.final-subgrade-teacher-comments h3 {
  font-size: 18px !important;
}

.finalsub_grade_submission .rating-form {
  background: transparent !important;
}
.finalsub_grade_submission .rating-form:before {
  display: none !important;
}

.question .final-mark-focus {
  background: #fff;
  border-radius: 4px;
  padding: 5px;
}

.container_of_add_answers_to_pairing {
  background: #fafafa;
}
.container_of_add_answers_to_pairing #deleteQuestion, .container_of_add_answers_to_pairing #deleteOption {
  color: #e5301c;
  font-size: 20px;
  padding: 15px 0;
}
.container_of_add_answers_to_pairing .answer_row #label > div, .container_of_add_answers_to_pairing .option_row #label > div {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.schedule-table {
  color: #666;
  font-size: 1em;
  width: 100%;
}

.schedule-table tr {
  border-bottom: 2px solid #eee;
}

.schedule-table tr.sortable {
  height: 100px;
}

.schedule-table th, .schedule-table td {
  padding: 10px 5px;
  margin: 3px 0;
}

.schedule-table th {
  color: #444;
}

.schedule-table .slot-card {
  background: #fff;
  padding: 5px;
  border-radius: 5px;
  border-right: 5px solid #666;
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.25);
  position: relative;
}

.schedule-table .slot-card.multi {
  cursor: pointer;
  display: block;
  border: 0;
}

.schedule-table .slot-card.multi:not(:last-child) {
  margin-bottom: 10px;
}

.schedule-table .slot-card i {
  font-size: 0.8em;
  font-style: normal;
}

.schedule-table .sortable td:first-child {
  border: 0 !important;
}

.schedule-table .slot-card i.add-prep, .schedule-table .slot-card .homework-count {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
}

.schedule-table .slot-card .homework-count {
  top: 20px;
  height: 20px;
  width: 20px;
  background: #4fa1e2;
  color: #FFF;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
}

.schedule-table .slot-card a.schedule-prep {
  display: block;
  color: #4fa1e2;
}

.schedule-table .slot-card .schedule-homework {
  color: #717171;
}

.schedule-homework-hr, .schedule-homework {
  display: none;
}

.schedule-table .slot-card.show-homeworks .schedule-homework-hr, .schedule-table .slot-card.show-homeworks .schedule-homework {
  display: block;
}

.toggle_button_card {
  display: flex;
  align-items: center;
  background: #DEDEDE40;
  padding: 10px 15px;
  border-radius: 10px;
  margin: 10px 0px;
  gap: 20px;
}
.toggle_button_card.is_checked {
  background-color: #00CEFF26;
}
.toggle_button_card .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  min-width: 40px;
  height: 24px;
}
.toggle_button_card .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle_button_card .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 24px;
}
.toggle_button_card .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  right: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}
.toggle_button_card input:checked + .slider {
  background-color: #00CEFF;
}
.toggle_button_card input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
.toggle_button_card input:checked + .slider:before {
  -webkit-transform: translateX(-16px);
  -ms-transform: translateX(-16px);
  transform: translateX(-16px);
}
.toggle_button_card .text-off {
  display: block;
  margin-left: 2%;
  margin-right: auto;
}
.toggle_button_card .text-on {
  display: none;
  color: #00CEFF;
  margin-left: 2%;
  margin-right: auto;
}
.toggle_button_card.is_checked .text-off {
  display: none;
}
.toggle_button_card.is_checked .text-on {
  display: block;
}

.schedule-table tr {
  border-bottom-width: 1px;
}
.schedule-table tr.sortable {
  height: auto;
}
.schedule-table tr td {
  padding: 10px 7px;
  min-width: 220px;
}
.schedule-table tr td.title {
  position: relative;
  min-height: 130px;
}
.schedule-table tr td .title_card {
  background: #f5f5f5;
  border-radius: 20px;
  padding: 15px 25px;
  position: absolute;
  display: block;
  width: 100%;
  height: -webkit-fill-available;
  top: 0;
  right: 0;
  margin: 10px 5px;
}
.schedule-table thead tr {
  border-bottom: 2px solid #eee;
  display: grid;
  grid-template-columns: 220px repeat(5, 1fr);
}
.schedule-table thead tr td {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.schedule-table thead tr .head_day {
  background: #f5f5f5;
  border-radius: 19px;
  padding: 10px 20px;
  width: fit-content;
}
.schedule-table tbody tr {
  display: grid;
  grid-template-columns: 220px repeat(5, 1fr);
}
.schedule-table .slot-card {
  border-left: none;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}
.schedule-table .slot-card.multi:not(:last-child) {
  margin-bottom: 15px;
}
.schedule-table .slot-card .icon-more-vertical {
  font-size: 30px;
  position: absolute;
  left: 2px;
  top: 11px;
  color: #999999;
  transform: rotate(0deg);
  transform-origin: left top;
}
.schedule-table .slot-card .slot-card-title {
  font-size: 16px;
  color: #444;
  pointer-events: all;
  cursor: auto;
  width: fit-content;
  font-weight: 500;
}
.schedule-table .slot-card .slot-card-img, .schedule-table .slot-card .slot-card-head img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  box-shadow: 0px 0px 3px 0.5px lch(0 0 0/0.2);
  margin-left: 8px;
}
.schedule-table .slot-card .slot-card-info {
  font-size: 15px;
  color: #444;
  margin: 5px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.5);
}
.schedule-table .slot-card .img-name-title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-left: 10px;
}
.schedule-table .slot-card .img-name-title strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}
.schedule-table .slot-card .slot-card-techer {
  margin: 10px 5px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}
.schedule-table .slot-card .slot-card-techer:last-of-type {
  margin-bottom: 0;
}
.schedule-table .slot-card .slot-card-techer img {
  width: 35px;
  height: 35px;
}
.schedule-table .slot-card .slot-card-techer i {
  font-size: 12px;
  font-weight: 500;
  color: #444;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}
.schedule-table .slot-card .slot-card-techer .substitute_techer {
  display: grid;
}
.schedule-table .slot-card .slot-card-techer .substitute_techer .substitute_tag {
  background: #9BF3FF;
  padding: 2px 8px;
  width: fit-content;
  border-radius: 15px;
  font-weight: 600;
  color: #333;
  font-size: 11px;
  position: relative;
  right: -5px;
}
.schedule-table .slot-card .hall_title {
  position: absolute;
  line-height: 1.1;
  top: -9px;
  left: 35px;
  background: #9BF3FF;
  padding: 3px 9px;
  border-radius: 10px;
  font-weight: bold;
  color: #333;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}
.schedule-table .slot-card .substitute_card {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  border: 1px solid #444;
  display: none;
}
.schedule-table .slot-card .substitute_card .icon-clear {
  font-size: 24px;
  position: absolute;
  left: 7px;
  top: 11px;
  color: #999999;
}
.schedule-table .slot-card .substitute_card .substitute-btn {
  font-size: 16px;
  border: 1px solid #ddd;
  padding: 5px 15px;
  border-radius: 19px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 190px;
}
.schedule-table .slot-card .substitute_card .substitute-btn .icon {
  color: var(--main-color);
}
.schedule-table .slot-card .substitute_card .substitute-btn .icon-edit-3 {
  color: #666;
}
.schedule-table .slot-card .substitute_card .substitute-btn .icon-trash-2 {
  color: #FF4500;
}
.schedule-table .slot-card .substitute_card .substitute-btn .text {
  color: #444;
  width: -webkit-fill-available;
}
.schedule-table.cant_sortable .icon-more-vertical, .schedule-table.cant_sortable .icon-clear, .schedule-table.cant_sortable .substitute-btn {
  pointer-events: all;
}
.schedule-table button {
  background: transparent;
  border: unset;
}

#assigning_lectures .modal-content {
  border-radius: 10px;
}
#assigning_lectures .modal-body .modal_title {
  display: flex;
  justify-content: space-between;
  margin: 10px 5px;
  margin-bottom: 20px;
}
#assigning_lectures .modal-body .modal_title div {
  background: #39E8FF80;
  padding: 4px 17px;
  font-size: 13px;
  border-radius: 14px;
  line-height: 20px;
  font-weight: 500;
}
#assigning_lectures .modal-body .modal_title h4 {
  font-size: 20px !important;
  font-weight: 600;
}
#assigning_lectures .modal-body .modal_title .icon-arrow-left {
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
}
#assigning_lectures .modal-body .chosen-container {
  width: 100% !important;
}
#assigning_lectures .modal-body label {
  color: #444;
}
#assigning_lectures .modal-body .teacher_check_box {
  margin: 20px 10px;
}
#assigning_lectures .modal-body .teacher_check_box .teacher_check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  padding: 4px 10px 4px 0;
  border-radius: 10px;
}
#assigning_lectures .modal-body .teacher_check_box .teacher_check.checked {
  background: rgba(0, 204, 255, 0.1);
}
#assigning_lectures .modal-body .teacher_check_box .teacher_check .input.select {
  width: 50%;
  min-width: 150px;
}
#assigning_lectures .modal-body .teacher_check_box .teacher_check .lectures_number {
  padding: 5px 12px;
  border: 1px solid #ccc;
  border-radius: 15px;
  display: flex;
  gap: 10px;
}
#assigning_lectures .modal-body .teacher_check_box .absense_messege p {
  text-align: left;
}
#assigning_lectures .modal-body .checkbox {
  display: flex;
  gap: 25px;
  flex-wrap: nowrap;
}
#assigning_lectures .modal-body .checkbox input[type=checkbox] {
  width: 10px;
  top: -2px;
}
#assigning_lectures .modal-body .checkbox input[type=checkbox]:before {
  border-radius: 50%;
  border: 1px solid #DEDEDE;
}
#assigning_lectures .modal-body .checkbox input[type=checkbox]:checked:before {
  content: "\f111";
  font-size: 12px;
  border: 1px solid var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
#assigning_lectures .modal-body .checkbox label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
}
#assigning_lectures .modal-body .modal_buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
#assigning_lectures .modal-body .modal_buttons button {
  width: 25%;
  border-radius: 20px;
  padding: 8px 15px;
}
#assigning_lectures .modal-body .card-1 .teacher_check_box {
  max-height: 45vh;
  overflow: auto;
}
#assigning_lectures .modal-body .card-2 {
  display: none;
}

.schedule_filters {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.schedule_filters .container {
  margin: 0;
}
@media (max-width: 992px) {
  .schedule_filters .container {
    padding: 0;
  }
}
.schedule_filters .advance_filters_btn {
  width: fit-content;
  line-height: 0.7;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 27px;
  color: var(--main-color);
  margin-top: 37px;
}
@media (max-width: 992px) {
  .schedule_filters .advance_filters_btn {
    align-self: flex-end;
    margin-bottom: 14px;
  }
}
.schedule_filters .chosen-container-single .chosen-single {
  border-radius: 10px !important;
}
.schedule_filters .chosen-container-multi .chosen-choices {
  border-radius: 10px !important;
}
.schedule_filters .chosen-container-active.chosen-with-drop .chosen-single {
  border-radius: 10px !important;
}
.schedule_filters select.form-control {
  border-radius: 10px !important;
}
.schedule_filters label {
  color: #444;
}

.load_container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  pointer-events: none;
}
.load_container img {
  z-index: 10;
}

.no-data-flex2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background-color: #eee;
  border-radius: 4px;
  color: #aeaeae;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden !important;
}

.attendance_taken {
  border-radius: 10px;
  box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.25);
  font-size: 16px;
  padding: 10px;
  cursor: pointer;
  margin: 20px;
  background-color: #f3f3f3 !important;
  color: #777;
  text-align: center;
  display: block;
}

.attendance_taken.active {
  background-color: #85c042 !important;
  color: #fff;
}

.gbadge[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  font-size: 1em;
  background: #4fc416;
  color: white;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 23px;
  border-radius: 50%;
}

.rbadge[data-badge]:after {
  content: attr(data-badge);
  position: absolute;
  font-size: 1em;
  background: #f74e20;
  color: white;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 23px;
  border-radius: 50%;
}

.view-individual-grades #teacher_view_individual_gradesForm {
  display: block;
}
.view-individual-grades .grades-side-menu {
  background: #fff;
  border: 2px solid #EEE;
  height: 700px;
  max-height: 700px;
  width: 250px;
  float: right;
  margin: 0 2px;
  border-top: 2px solid var(--main-color);
}
.view-individual-grades .grades-side-menu ul {
  height: 500px;
  max-height: 500px;
  overflow-y: auto;
}
.view-individual-grades .grades-side-menu > h3 {
  background: #fff;
  font-size: 17px;
  margin: 0 0 10px 0;
  padding: 15px 5px;
  position: relative;
}
.view-individual-grades .grades-side-menu input.search {
  padding: 7px;
  display: block;
  width: 90%;
  margin: 8px auto;
  background: #fff;
  border-radius: 3px;
  color: #888;
}
.view-individual-grades .grades-side-menu li {
  display: block;
  font-size: 14px;
  color: #444;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
  text-transform: capitalize;
  position: relative;
}
.view-individual-grades .grades-side-menu li:hover {
  background: #f1f1f1 !important;
  color: #555 !important;
}
.view-individual-grades .grades-side-menu li.selected {
  background: var(--main-color) !important;
  color: #fff !important;
}
.view-individual-grades .grades-side-menu:not(.open-menu) {
  width: 60px;
  position: relative;
  overflow: hidden;
}
.view-individual-grades .grades-side-menu:not(.open-menu) *,
.view-individual-grades .grades-side-menu:not(.open-menu) input.search {
  display: none;
  pointer-events: none;
}
.view-individual-grades .grades-side-menu:not(.open-menu) ul {
  display: block;
}
.view-individual-grades .grades-side-menu:not(.open-menu) h3,
.view-individual-grades .grades-side-menu:not(.open-menu) li.selected {
  display: block;
  transform: rotate(-90deg) translateX(-100%);
  position: absolute;
  left: 0;
  width: 200px;
  transform-origin: top left;
  text-align: center;
}
.view-individual-grades .grades-side-menu:not(.open-menu) h3 {
  top: 0;
  line-height: 30px;
}
.view-individual-grades .grades-side-menu:not(.open-menu) li.selected {
  top: 300px;
}
.view-individual-grades .wideTableContainer .table {
  float: left;
  width: calc(100% - 150px);
  overflow-x: auto;
  display: inline-grid;
}
.view-individual-grades .wideTableContainer .table th, .view-individual-grades .wideTableContainer .table td {
  min-width: 200px !important;
  max-width: 200px !important;
  width: 200px !important;
  display: table-cell;
}
.view-individual-grades .wideTableContainer .table th:first-child, .view-individual-grades .wideTableContainer .table td:first-child {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  z-index: 999;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.view-individual-grades .wideTableContainer .table.menu-is-open {
  width: calc(100% - 340px);
}
.view-individual-grades #grades_managment {
  transform: translateX(10px);
}
.view-individual-grades div#grades_managment .btn {
  border: 0;
  text-align: center;
  padding: 4px;
  width: 30px;
}
.view-individual-grades div#grades_managment .btn i {
  margin: 0;
}
.view-individual-grades div#grades_managment .btn#delete_grade {
  background: #F44336;
  color: #FFF;
}
.view-individual-grades div#grades_managment [data-target="#gradesModal"] {
  display: none !important;
}
.view-individual-grades div#grades_managment .btn[data-toggle=modal] {
  background: var(--main-color);
  color: #FFF;
}
.view-individual-grades .user-avatar-photo {
  height: 40px;
  width: 40px;
  border-radius: 10px;
  margin-left: 5px;
  float: right;
}
.view-individual-grades .ajaxAddSubmit {
  margin: 0 5px;
}
.view-individual-grades .save_grade {
  display: none;
}
.view-individual-grades .wideTableContainer .table .input-group {
  width: 100%;
}
.view-individual-grades .wideTableContainer .table input {
  width: 100%;
  min-width: 100px;
}
.view-individual-grades .wideTableContainer table.classic td {
  padding-bottom: 16px;
}
.view-individual-grades .btn-toolbar {
  float: left;
}
.view-individual-grades td.dirty {
  background: -moz-linear-gradient(45deg, #fcfff4 0%, #e9e9ce 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #fcfff4 0%, #e9e9ce 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #fcfff4 0%, #e9e9ce 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fcfff4", endColorstr="#e9e9ce",GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}

.notification-wrapper {
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 5px;
  padding: 16px;
  text-align: center;
}

.notifications_all {
  text-align: right;
  width: 60%;
  margin: 0 auto;
}

.notifications_all li {
  position: relative;
  padding: 17px 15px;
  padding-right: 50px;
  background-color: #fff;
  border-color: #ddd;
}

.notifications_all li.seen {
  opacity: 0.5;
}

.notifications_all li a {
  display: block;
  text-decoration: none;
}

.notifications_all .notification_type {
  position: absolute;
  font-size: 2em;
  top: 5px;
  right: 10px;
  color: #CCC;
}

.notifications_all .notification-subject {
  display: block;
  text-transform: uppercase;
  color: #666;
}

.notifications_all .notification-time {
  display: block;
  position: relative;
  left: 10px;
  bottom: 3px;
  color: #CCC;
  float: left;
}

.loader {
  background: url(../../img/classera_loading.gif) no-repeat;
  width: 100px;
  height: 100px;
  margin: 16px auto;
}

.notification-wrapper h1 {
  margin-bottom: 2%;
}

.notification-wrapper h1 i {
  margin-left: 11px;
  color: #ffffff;
  font-size: 0.7em;
  border-radius: 5px;
  background: var(--main-color);
  padding: 4px;
}

@media (max-width: 1050px) {
  .notifications_all {
    width: 100%;
  }
}
.dashboard-wrapper .status-1,
.dashboard-wrapper .status-2,
.dashboard-wrapper .status-3,
.dashboard-wrapper .status-4,
.dashboard-wrapper .status-6 {
  background: #cf564f;
  color: #FFF;
  padding: 10px;
  margin: 10px;
  border-radius: 3px;
  text-align: center;
  display: inline-block;
  font-style: normal;
}
.dashboard-wrapper .status-2 {
  background: #5cbdd9;
}
.dashboard-wrapper .status-3 {
  background: #FF9800;
}
.dashboard-wrapper .status-4 {
  background: #5db55d;
}
.dashboard-wrapper .status-6 {
  background: #d355ad;
}
.dashboard-wrapper #team_individual_rating .modal-dialog {
  min-width: 60%;
}
.dashboard-wrapper #stats_school {
  background-color: #fff !important;
}
.dashboard-wrapper .absences-box-container .flot-x-axis .flot-tick-label.tickLabel {
  transform: translateX(15px);
  max-width: 10% !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-wrapper .well {
  background: #fff;
}
.dashboard-wrapper .absences-box-container .flot-x-axis .flot-tick-label.tickLabel {
  transform: translateX(15px);
  max-width: 10% !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart_container.well {
  background: #fff;
}
.chart_container.well svg > rect {
  fill: #fff;
}
.chart_container.well svg text {
  fill: #444 !important;
}
.chart_container.well svg tspan {
  fill: #777 !important;
}

.activation_engagement {
  width: 100%;
  max-width: 100%;
  position: relative;
  height: 50px;
}

.activation_engagement label {
  position: absolute;
  height: 100%;
  margin: 0 !important;
  padding-top: 15px;
  color: #fff;
  text-align: center;
}

.activation_engagement .closed,
.activation_engagement_info span.closedInfo:before {
  background: var(--main-color);
}

.activation_engagement .responded,
.activation_engagement_info span.respondedInfo:before {
  background: #8b7adf;
}

.activation_engagement .no,
.activation_engagement_info span.noInfo:before {
  background: #98d4f5;
}

.activation_engagement_info span {
  display: inline-block;
  padding-left: 20px;
  position: relative;
  margin: 10px;
  color: #777;
}

.activation_engagement_info span:before {
  position: absolute;
  content: "";
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #444;
}

.supportCircle {
  position: relative;
  max-width: 400px;
  max-height: 400px;
  text-align: center;
  text-transform: capitalize;
}

.supportCircle canvas {
  max-width: 300px;
  /*max-height: 300px;*/
  margin: 0 auto;
}

.supportChartsBox h3 {
  text-align: center;
  border-top: 1px solid #ddd;
  text-transform: capitalize;
  width: 100%;
  padding-top: 22px;
  margin: 0 auto;
  color: var(--main-color);
  margin-bottom: 15px;
}

.supportChartsBox .box-header {
  border-bottom: 2px solid var(--main-color);
  color: #444 !important;
  padding-bottom: 15px;
  padding-top: 10px;
  border-top: 0;
  text-align: center;
}

.supportChartsBox .activation_engagement_header {
  border: 0;
  text-align: start;
}

.supportChartsBox .activation_engagement label {
  transition: all ease-in-out 0.5s;
}

.supportCircle .total {
  color: #777;
}

.supportChartsBox .timeOptions {
  width: 100%;
  margin-top: 28px;
}

.supportChartsBox .canvasBox {
  min-height: 300px;
}

.supportChartsBox .timeOptions .insertTimeBox {
  display: inline-block;
}

.supportChartsBox .timeOptions .btn {
  background: var(--main-color);
  color: #fff;
  border: 0;
  margin-bottom: 2px;
  border: 1px solid var(--main-color);
}

.supportChartsBox .timeOptions .btn.selcted {
  background: #fff;
  color: var(--main-color);
}

.supportChartsBox .insertTimeBox input {
  padding: 6px 7px !important;
  border: 1px solid var(--main-color);
  background: #fafafa;
  color: #444;
  margin-bottom: 5px;
  border-radius: 4px;
}

#supportChartModal label {
  margin: 0;
  color: #444;
}

#supportChartModal li {
  margin: 2px;
  border: 0;
  border-bottom: 1px solid #d5d5d5;
  background: #fff;
}

#supportChartModal ul {
  height: 240px;
  overflow-y: auto;
}

#supportChartModal span {
  color: #777;
}

#supportChartModal .modal-header {
  text-transform: capitalize;
  text-align: center;
  color: var(--main-color);
  background: #fff;
  border-bottom: 1px solid;
}

.supportCircle h4 {
  color: #444;
}

.supportChartsBox .dateError {
  color: #fa7373;
}

.supportChartsBox .hidden_box {
  display: none;
}

.supportChartsBox .showMore {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--main-color);
  border-top: 2px solid;
  padding-top: 10px;
}
.supportChartsBox .showMore .showLessLabel {
  display: none;
}
.supportChartsBox .showMore.showLess .showMoreLabel {
  display: none;
}
.supportChartsBox .showMore.showLess .showLessLabel {
  display: block;
}

.evidences {
  margin: 0 auto;
  float: none;
}

.evidence {
  padding: 10px 10px 10px 5px;
  transition: all 0.2s ease;
  cursor: pointer;
  max-width: 385px;
}

.evidence-sm {
  background-color: #fff;
  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
  transition: 0.4s;
  max-height: 150px;
  border-left: 5px solid var(--main-color);
  padding: 0 10px;
  height: 150px;
}

.evidence-sm:hover {
  transform: scale(1.06);
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.25);
}

.evidence-sm h4 {
  padding: 10px;
  color: #444;
  word-break: break-word;
  line-height: 1.7;
  height: 100px;
  max-height: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.dashboard-block .flot-tick-label.tickLabel {
  color: #444;
}
.dashboard-block .flot-text {
  color: #444 !important;
}

#visits_by_role_chart svg > rect {
  fill: #fff;
}

#visits_by_role_chart svg text {
  fill: #444 !important;
}

#visits_by_role_chart .highcharts-tooltip + span {
  color: #444 !important;
}

.selected-schools {
  line-height: 45px;
  cursor: pointer;
}
.selected-schools:after {
  content: "\ea48";
  font-family: "icomoon";
  float: left;
}

.markSchemeAnalysis .custome_report {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.markSchemeAnalysis .custome_report h3 {
  font-size: 16px;
}
.markSchemeAnalysis .custome_report button {
  max-height: 48px;
}
@media (max-width: 600px) {
  .markSchemeAnalysis .custome_report {
    flex-wrap: wrap;
  }
}

#selected_report_card_chosen input {
  width: 98%;
}

.admin-dashboard-box {
  padding: 15px;
  border-radius: 15px;
}
.admin-dashboard-box:not(.box_transparent_blue_bg) {
  background: #fff;
}
.admin-dashboard-box .body-of-dashboard-box {
  padding: 15px 0 0;
}
.admin-dashboard-box .dashboard-box-title {
  direction: rtl;
}
.admin-dashboard-box .dashboard-box-title h4 {
  font-size: 1.3em !important;
  margin: 0;
  text-transform: uppercase;
}
.admin-dashboard-box .dashboard-box-title h4._1_1 {
  font-size: 1.1em !important;
}
.admin-dashboard-box .dashboard-box-title h4:not(.bold) {
  font-weight: 400 !important;
}
@media (max-width: 600px) {
  .admin-dashboard-box .dashboard-box-title h4 {
    font-size: 1.1em;
  }
}
.admin-dashboard-box .dashboard-box-title .icons-of-title-box {
  color: var(--main-color);
  margin-left: 10px;
  font-size: 1.5em;
}
.admin-dashboard-box .dashboard-box-title .select-menu-in-dashboard-box .select-styled {
  color: #444;
  border-color: #444;
}
.admin-dashboard-box.box_transparent_blue_bg {
  color: #fff;
}
.admin-dashboard-box.box_transparent_blue_bg .dashboard-box-title h4 {
  color: #fff;
}
.admin-dashboard-box .tab-content {
  box-shadow: unset;
  padding: 0;
}
.admin-dashboard-box .dashbaord-box-tabs {
  border-radius: 25px;
  border: 1px solid var(--main-color);
  display: flex;
  align-items: center;
  list-style: none;
}
.admin-dashboard-box .dashbaord-box-tabs li {
  padding: 10px 8px;
  white-space: nowrap;
}
.admin-dashboard-box .dashbaord-box-tabs li.active {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
}
.admin-dashboard-box .dashbaord-box-tabs li a {
  color: unset !important;
  text-decoration: unset;
  text-transform: uppercase;
  font-size: 12px;
}
.admin-dashboard-box:not(.box_transparent_blue_bg) .dashbaord-box-tabs li.active {
  background: var(--main-color);
  color: #fff;
}
.admin-dashboard-box .admin-content-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  list-style: none;
  grid-row-gap: 30px;
  grid-column-gap: 10px;
}
@media (min-width: 750px) {
  .admin-dashboard-box .admin-content-stats {
    grid-row-gap: 50px;
  }
}
@media (max-width: 750px) {
  .admin-dashboard-box .admin-content-stats {
    grid-template-columns: repeat(2, auto);
  }
}
@media (max-width: 400px) {
  .admin-dashboard-box .admin-content-stats {
    grid-template-columns: repeat(1, auto);
  }
}
.admin-dashboard-box .admin-content-stats li {
  text-align: center;
  position: relative;
}
.admin-dashboard-box .admin-content-stats li > div {
  display: inline-flex;
  flex-direction: column;
  font-weight: 300;
  text-align: right;
}
@media (min-width: 750px) {
  .admin-dashboard-box .admin-content-stats li:not(:last-child):before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 90%;
    transform: translateY(-50%);
    width: 1px;
    opacity: 0.5;
    background: var(--main-color);
  }
  .admin-dashboard-box .admin-content-stats li:nth-child(5n-1)::before, .admin-dashboard-box .admin-content-stats li:nth-child(9n-1)::before {
    display: none;
  }
}
.admin-dashboard-box .admin-content-stats li i {
  color: #fff;
  font-style: normal;
  font-size: 1.1em;
}
.admin-dashboard-box .admin-content-stats li strong {
  font-size: 3em;
  font-weight: 400;
}
.admin-dashboard-box .admin-content-stats li span {
  font-size: 1.1em;
  text-transform: uppercase;
}
.admin-dashboard-box #right_now_container {
  background: transparent;
}
.admin-dashboard-box #right_now_container .loading {
  margin: 10px auto;
}
.admin-dashboard-box .vertical_list ul {
  float: unset;
}
.admin-dashboard-box .body-of-most-active-users {
  padding-top: 30px;
}
.admin-dashboard-box .body-of-most-active-users .dashboard-block {
  max-height: 217px;
  height: 217px;
  overflow-y: auto;
}
.admin-dashboard-box .body-of-most-active-users .tab-pane:not(.active) {
  display: none;
}
.admin-dashboard-box .body-of-most-active-users .no-most-active-data {
  height: 271px;
}
.admin-dashboard-box .body-of-most-active-users .no-most-active-data i {
  font-size: 2em;
}
.admin-dashboard-box .semester-progress-wrapper {
  background: #ddd;
  height: 10px;
  border-radius: 25px;
  margin: 0 5%;
  overflow: hidden;
  min-width: 100px;
}
.admin-dashboard-box .semester-progress-wrapper .semester-progress-bar {
  height: 100%;
  width: 0;
}
.admin-dashboard-box .semester-progress-wrapper .semester-progress-bar.normal_bg {
  background: var(--main-color);
}
.admin-dashboard-box .semester-progress-wrapper .semester-progress-bar:not(.normal_bg) {
  background: #FF5B1D;
}
.admin-dashboard-box .remainingTimeLabel {
  background: #ddd;
  padding: 10px 15px;
  border-radius: 25px;
  white-space: nowrap;
}
.admin-dashboard-box .vcr-box-stu-dashboard {
  margin: 0 auto;
}
.admin-dashboard-box.virtual_classrooms_admin_box {
  color: #fff;
  background: linear-gradient(180deg, #5DCB34, #00E2D0);
}
.admin-dashboard-box.virtual_classrooms_admin_box .dashboard-box-title h4, .admin-dashboard-box.virtual_classrooms_admin_box .dashboard-box-title .icon-headphones {
  color: #fff;
}
.admin-dashboard-box.virtual_classrooms_admin_box .vcr-box-stu-dashboard {
  background: transparent;
  box-shadow: unset;
}
.admin-dashboard-box.virtual_classrooms_admin_box .user_name {
  text-align: center;
  width: 100%;
}
.admin-dashboard-box.virtual_classrooms_admin_box #carousel-virtual_classrooms {
  padding-top: 0;
}
.admin-dashboard-box.virtual_classrooms_admin_box .no-data-found {
  color: #fff;
}
.admin-dashboard-box.virtual_classrooms_admin_box .no-data-found i:before {
  color: #fff;
}
.admin-dashboard-box.virtual_classrooms_admin_box .vcrs-stu-dashboard-number {
  background: #fff !important;
}
.admin-dashboard-box.virtual_classrooms_admin_box .vcrs-stu-dashboard-number p {
  color: var(--main-color);
}
.admin-dashboard-box .vcrs-stu-dashboard-number {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.7em;
  width: 1.7em;
  background: var(--main-color);
  border-radius: 50%;
  margin-left: auto;
  text-decoration: none;
  font-size: 20px;
  font-weight: 400;
  margin-right: auto;
  background-color: var(--main-color);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.admin-dashboard-box .vcrs-stu-dashboard-number:hover {
  transform: scale(1.1);
}
.admin-dashboard-box .vcrs-stu-dashboard-number p {
  margin: auto;
  color: #fff;
  font-size: 14px;
}
.admin-dashboard-box .no-data-found i {
  font-size: 4em;
  margin: 15px 0;
}
.admin-dashboard-box .no-data-found p {
  font-size: 14px;
}
.admin-dashboard-box .users_list_container_ {
  list-style: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  margin-bottom: 0;
  height: 227px;
}
.admin-dashboard-box .users_list_container_ li {
  display: none;
  text-align: center;
  flex: 1;
}
.admin-dashboard-box .users_list_container_ li .bar {
  width: 50px;
  background: var(--main-color);
  opacity: 0.3;
  border-radius: 1px;
  margin: 0 auto;
}
.admin-dashboard-box .users_list_container_ li:nth-child(-n+3) {
  display: block;
}
.admin-dashboard-box .users_list_container_ li:nth-of-type(1) {
  order: 1;
}
.admin-dashboard-box .users_list_container_ li:nth-of-type(1) .bar {
  height: 87px;
}
.admin-dashboard-box .users_list_container_ li:nth-of-type(1) span {
  color: #68E327;
}
.admin-dashboard-box .users_list_container_ li:nth-of-type(2) {
  order: 0;
}
.admin-dashboard-box .users_list_container_ li:nth-of-type(2) .bar {
  height: 65px;
}
.admin-dashboard-box .users_list_container_ li:nth-of-type(2) span {
  color: #0084D7;
}
.admin-dashboard-box .users_list_container_ li:nth-of-type(3) {
  order: 2;
}
.admin-dashboard-box .users_list_container_ li:nth-of-type(3) .bar {
  height: 40px;
}
.admin-dashboard-box .users_list_container_ li:nth-of-type(3) span {
  color: #D5A507;
}
.admin-dashboard-box .users_list_container_ li img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.admin-dashboard-box .users_list_container_ li .sub_text_details {
  display: none;
}
.admin-dashboard-box .users_list_container_ li .sub_text {
  display: block;
  margin: 15px 0;
  font-weight: 300;
  font-size: 1.8em;
}
.admin-dashboard-box .users_list_container_ li a {
  color: #444;
  font-weight: 500;
  text-decoration: unset;
  display: block;
  width: 70%;
  margin: 10px auto;
  text-transform: capitalize;
  font-size: 12px;
  height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.admin-dashboard-box .dashboard-boxes-tabs-wrapper {
  margin-top: 10px;
  flex-wrap: wrap;
}
.admin-dashboard-box.admin-most-active-users {
  padding-bottom: 0;
}
.admin-dashboard-box .body-of-canteen-box i {
  font-size: 4em;
  margin-bottom: 20px;
  color: var(--main-color);
}
.admin-dashboard-box .body-of-canteen-box span:before {
  color: var(--main-color);
}
.admin-dashboard-box .body-of-canteen-box h1 {
  margin-bottom: 0;
}
.admin-dashboard-box .body-of-canteen-box > div {
  text-align: center;
}
.admin-dashboard-box .body-of-canteen-box .border-between {
  background: #eee;
  width: 1px;
  height: 50%;
}
.admin-dashboard-box .loading {
  margin: 10px auto;
}
@media (max-width: 1050px) {
  .admin-dashboard-box.school-activation-per-week {
    height: auto !important;
    padding-bottom: 15px !important;
  }
}

@media (max-width: 650px) {
  .RemainingCurrentSemester .dashboard-box-title {
    margin-bottom: 10px;
  }
}
#report_card_progress_loading img[src*="ios_loading.gif"], .admin-dashboard-box img[src*="ios_loading.gif"] {
  width: 50px;
  height: auto;
  margin-top: 50px;
  opacity: 0.3;
}

.online-statistics-sections-wrapper {
  display: grid;
  grid-gap: 20px;
}
@media (min-width: 1200px) {
  .online-statistics-sections-wrapper {
    grid-template-columns: 33% calc(67% - 20px);
  }
}
.online-statistics-sections-wrapper .online-section-wrapper .selected-schools {
  color: #fff;
  background: transparent;
  border-color: #fff;
}
.online-statistics-sections-wrapper .online-section-wrapper .select-school {
  margin-bottom: 15px;
}
.online-statistics-sections-wrapper .statistics-wrapper .admin-dashboard-box {
  height: 100%;
}
.online-statistics-sections-wrapper #visits_by_role_chart {
  transform: scale(1);
}
.online-statistics-sections-wrapper .right_now_container {
  height: 250px;
}
.online-statistics-sections-wrapper .chosen-container-single .chosen-single {
  background: transparent;
  border-color: #fff;
}
.online-statistics-sections-wrapper .chosen-container-single .chosen-single span {
  color: #fff;
}
.online-statistics-sections-wrapper .chosen-container-single .chosen-single div b {
  filter: brightness(0) invert(1);
}

.dashboard-wrapper {
  padding-right: 10px;
}
.dashboard-wrapper .row {
  margin: 0 -10px;
}
@media (max-width: 1450px) {
  .dashboard-wrapper .virtual_classrooms {
    min-width: 100%;
  }
}

@media (max-width: 1050px) {
  #schoolActivation {
    height: 415px !important;
  }
}
.absences_this_week_row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  margin: 10px 0 20px;
}
@media screen and (max-width: 1200px) {
  .absences_this_week_row {
    grid-template-columns: 100%;
  }
}
.absences_this_week_row .dashboard-block {
  height: 100% !important;
}
.absences_this_week_row .admin-dashboard-box {
  height: 100% !important;
  background: #fff;
}
@media (max-width: 400px) {
  .absences_this_week_row .admin-dashboard-box .dashbaord-box-tabs li {
    padding: 10px 7px;
  }
}

/*@import 'owner_dashboard_old';*/
.students_status_labels {
  padding-left: 20px;
}
.students_status_labels .chart_label {
  display: flex;
  align-items: center;
  margin-left: 10px;
  margin-bottom: 5px;
  white-space: nowrap;
}
.students_status_labels span {
  display: inline-flex;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-left: 5px;
}

.users-reports-wrapper .attcControls {
  height: 70px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
}
.users-reports-wrapper .attcControls ul li {
  float: left;
  padding: 10px;
  margin: 10px;
  display: block;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.users-reports-wrapper .attcControls ul li label {
  vertical-align: top;
}
.users-reports-wrapper .attcControls ul li a {
  color: var(--main-color) !important;
}
.users-reports-wrapper .attcControls ul li select {
  border-radius: 10px;
  margin: 0 10px;
  height: 30px;
  width: 140px !important;
  padding: 5px;
  vertical-align: top;
}
.users-reports-wrapper .attcControls #date_filter {
  width: 100%;
}
.users-reports-wrapper svg > rect {
  fill: #fff;
}
.users-reports-wrapper svg text {
  fill: #444;
}
.users-reports-wrapper svg text[text-anchor=middle] {
  fill: #777;
}

@media only screen and (max-width: 800px) {
  .schools-settings-wrapper {
    /* Force table to not be like tables anymore */
    /* Hide table headers (but not display: none;, for accessibility) */
    /*
    Label the data
    */
  }
  .schools-settings-wrapper #flip-tables table,
.schools-settings-wrapper #flip-tables thead,
.schools-settings-wrapper #flip-tables tbody,
.schools-settings-wrapper #flip-tables th,
.schools-settings-wrapper #flip-tables td,
.schools-settings-wrapper #flip-tables tr {
    display: block;
  }
  .schools-settings-wrapper #flip-tables thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .schools-settings-wrapper #flip-tables tr {
    border: 1px solid #ccc;
  }
  .schools-settings-wrapper #flip-tables td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
    display: flex;
    justify-content: flex-end;
  }
  .schools-settings-wrapper #flip-tables td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
  }
  .schools-settings-wrapper #flip-tables td:before {
    content: attr(data-title);
  }
  .schools-settings-wrapper #flip-tables .td_title {
    display: block;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 3px solid #eee;
    border-top: 3px solid #eee;
    font-size: 14px;
  }
}
@media only screen and (min-width: 800px) {
  .schools-settings-wrapper .td_title {
    display: none;
  }
}
.schools-settings-wrapper .add-new-template-section {
  border: 1px dotted #CCC;
}
.schools-settings-wrapper .notifications-templates {
  max-height: 500px;
  overflow-y: auto;
}
.schools-settings-wrapper .delete-template {
  margin: 5px;
}
.schools-settings-wrapper .notification-template {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 20px;
  margin: 16px;
}
.schools-settings-wrapper .notification-template:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
}
.schools-settings-wrapper td .form-group {
  margin: 0px;
}
.schools-settings-wrapper .checkbox label {
  padding-left: 0px;
}
.schools-settings-wrapper .checkbox-slider {
  display: none;
}
.schools-settings-wrapper form select:not(.chosen-select) {
  display: none !important;
}
.schools-settings-wrapper .usersPermissionsSettingsTable th, .schools-settings-wrapper .usersPermissionsSettingsTable td {
  padding: 5px 0 !important;
}
.schools-settings-wrapper .usersPermissionsSettingsTable .checkbox, .schools-settings-wrapper .usersPermissionsSettingsTable .checkbox {
  margin: 0;
}
.schools-settings-wrapper .widget {
  box-shadow: unset;
  border: 0;
  /*background: $sidemenu_bg;*/
  padding: 10px;
}
.schools-settings-wrapper .widget .form-title:not(.inner-title) {
  cursor: pointer;
}
.schools-settings-wrapper .widget .form-title.inner-title {
  pointer-events: none;
}
.schools-settings-wrapper .widget .form-title:not(.inner-title):after {
  content: "\f13a";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 18px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  margin: 8px;
  float: left;
  color: var(--main-color);
}
.schools-settings-wrapper .widget.collapsed .form-title:not(.inner-title):after {
  content: "\f139";
}
.schools-settings-wrapper .widget.collapsed *:not(.form-title), .schools-settings-wrapper .widget.collapsed .form-title.inner-title {
  display: none;
}
.schools-settings-wrapper .widget .form-title:not(.inner-title):before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 28px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  margin: 0 8px;
  color: var(--main-color);
  content: "\f085";
}
.schools-settings-wrapper .form-title.school-information:not(.inner-title):before {
  content: "\f015";
  color: #BA8641;
}
.schools-settings-wrapper .school-logo.form-title:not(.inner-title):before {
  content: "\f005";
  color: var(--main-color);
}
.schools-settings-wrapper .school-group.form-title:not(.inner-title):before {
  content: "\f19c";
  color: #7D2989;
}
.schools-settings-wrapper .contact-information form-title:not(.inner-title):before {
  content: "\f05a";
  color: #8BC34A;
}
.schools-settings-wrapper .general-settings.form-title:not(.inner-title):before {
  content: "\f0ad";
  color: #4CAF50;
}
.schools-settings-wrapper .chat-settings.form-title:not(.inner-title):before {
  content: "\f086";
  color: #4CAF50;
}
.schools-settings-wrapper .notifications-templates.form-title:not(.inner-title):before {
  content: "\f0f3";
  color: #3F51B5;
}
.schools-settings-wrapper .users-permissions-settings.form-title:not(.inner-title):before {
  content: "\f085";
  color: #9C27B0;
}
.schools-settings-wrapper .graduated-students-settings.form-title:not(.inner-title):before {
  content: "\f19d";
  color: #673AB7;
}
.schools-settings-wrapper .announcements-settings.form-title:not(.inner-title):before {
  content: "\f0a1";
  color: #F44336;
}
.schools-settings-wrapper .public-profiles-settings.form-title:not(.inner-title):before {
  content: "\f007";
  color: #009688;
}
.schools-settings-wrapper .lesson-preparations.form-title:not(.inner-title):before {
  content: "\f00b";
  color: #FFC107;
}
.schools-settings-wrapper .smart-classes-settings.form-title:not(.inner-title):before {
  content: "\f025";
  color: #E91E63;
}
.schools-settings-wrapper .absence-settings.form-title:not(.inner-title):before {
  content: "\f14a";
  color: #79060F;
}
.schools-settings-wrapper .social-media-accounts.form-title:not(.inner-title):before {
  content: "\f14d";
  color: #BA8641;
}
.schools-settings-wrapper .smart-mate.form-title:not(.inner-title):before {
  content: "\f14b";
  color: var(--main-color);
}
.schools-settings-wrapper .discussion-rooms.form-title:not(.inner-title):before {
  content: "\f075";
  color: #7D2989;
}
.schools-settings-wrapper .parents-students-requests.form-title:not(.inner-title):before {
  content: "\f14a";
  color: #8BC34A;
}
.schools-settings-wrapper .report-cards-settings.form-title:not(.inner-title):before {
  content: "\f012";
  color: #4CAF50;
}
.schools-settings-wrapper .messages-settings.form-title:not(.inner-title):before {
  content: "\f0e0";
  color: #4CAF50;
}
.schools-settings-wrapper .sms-settings.form-title:not(.inner-title):before {
  content: "\f10b";
  color: #3F51B5;
}
.schools-settings-wrapper .public-library.form-title:not(.inner-title):before {
  content: "\f06c";
  color: #79060F;
}

.edit_school_theme_menu {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 300px;
  background: #fafafa;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  z-index: 111;
  padding: 15px 20px;
}
.edit_school_theme_menu .edit_school_theme_body {
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.edit_school_theme_menu .background_box {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
  cursor: pointer;
}
.edit_school_theme_menu .background_box.selected {
  border: 2px solid var(--main-color);
}
.edit_school_theme_menu .background_box .titles {
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px 5px 5px;
}
.edit_school_theme_menu .background_box .titles p {
  margin-bottom: 0;
}
.edit_school_theme_menu .edit-group {
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
.edit_school_theme_menu .edit_theme_legend {
  color: var(--main-color);
  margin-top: 0;
  font-weight: 400 !important;
}
.edit_school_theme_menu .actions-bar {
  position: absolute;
  bottom: 0;
  padding: 8px 10px;
  left: 0;
  width: 100%;
  background: #eee;
}
.edit_school_theme_menu .actions-bar .btn {
  margin-left: 5px;
}

@media screen and (max-width: 550px) {
  .collapsed_all_widget_box .checkbox {
    margin: 0;
  }
}
.collapsed_all_widget_box label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  flex-direction: row-reverse;
  width: calc(100% - 10px) !important;
  padding-left: 0;
}
@media screen and (max-width: 550px) {
  .collapsed_all_widget_box label {
    width: calc(100% - 10px) !important;
  }
}
.collapsed_all_widget_box label input {
  position: absolute !important;
  top: 0;
  left: 0;
}
.collapsed_all_widget_box label .icon_of_collapse {
  background: rgba(var(--main-color-rgb), 0.12);
  border: 1px solid var(--main-color);
  padding: 5px;
  color: var(--main-color);
  font-size: 1.5em;
  font-weight: bold;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.collapsed_all_widget_box label h4 {
  font-size: 15px !important;
}
.collapsed_all_widget_box.collapsed label .icon_of_collapse {
  transform: rotate(180deg) !important;
}

.jstree-wrapper .jstree-node, .jstree-wrapper .jstree-children, .jstree-wrapper .jstree-container-ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}
.jstree-wrapper .jstree-node {
  white-space: nowrap;
}
.jstree-wrapper .jstree-anchor {
  display: inline-block;
  color: #000;
  white-space: nowrap;
  padding: 0 4px 0 1px;
  margin: 0;
  vertical-align: top;
}
.jstree-wrapper .jstree-anchor:focus {
  outline: 0;
}
.jstree-wrapper .jstree-anchor, .jstree-wrapper .jstree-anchor:link, .jstree-wrapper .jstree-anchor:visited, .jstree-wrapper .jstree-anchor:hover, .jstree-wrapper .jstree-anchor:active {
  text-decoration: none;
  color: inherit;
}
.jstree-wrapper .jstree-icon {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  vertical-align: top;
  text-align: center;
}
.jstree-wrapper .jstree-icon:empty {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  vertical-align: top;
  text-align: center;
}
.jstree-wrapper .jstree-ocl {
  cursor: pointer;
}
.jstree-wrapper .jstree-leaf > .jstree-ocl {
  cursor: default;
}
.jstree-wrapper .jstree .jstree-open > .jstree-children {
  display: block;
}
.jstree-wrapper .jstree .jstree-closed > .jstree-children, .jstree-wrapper .jstree .jstree-leaf > .jstree-children {
  display: none;
}
.jstree-wrapper .jstree-anchor > .jstree-themeicon {
  margin-right: 2px;
}
.jstree-wrapper .jstree-no-icons .jstree-themeicon, .jstree-wrapper .jstree-anchor > .jstree-themeicon-hidden {
  display: none;
}
.jstree-wrapper .jstree-hidden, .jstree-wrapper .jstree-node.jstree-hidden {
  display: none;
}
.jstree-wrapper .jstree-rtl .jstree-anchor {
  padding: 0 1px 0 4px;
}
.jstree-wrapper .jstree-rtl .jstree-anchor > .jstree-themeicon {
  margin-left: 2px;
  margin-right: 0;
}
.jstree-wrapper .jstree-rtl .jstree-node {
  margin-left: 0;
}
.jstree-wrapper .jstree-rtl .jstree-container-ul > .jstree-node {
  margin-right: 0;
}
.jstree-wrapper .jstree-wholerow-ul {
  position: relative;
  display: inline-block;
  min-width: 100%;
}
.jstree-wrapper .jstree-wholerow-ul .jstree-leaf > .jstree-ocl {
  cursor: pointer;
}
.jstree-wrapper .jstree-wholerow-ul .jstree-anchor, .jstree-wrapper .jstree-wholerow-ul .jstree-icon {
  position: relative;
}
.jstree-wrapper .jstree-wholerow-ul .jstree-wholerow {
  width: 100%;
  cursor: pointer;
  position: absolute;
  left: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.jstree-wrapper .jstree-contextmenu .jstree-anchor {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.jstree-wrapper .vakata-context {
  display: none;
}
.jstree-wrapper .vakata-context, .jstree-wrapper .vakata-context ul {
  margin: 0;
  padding: 2px;
  position: absolute;
  background: #f5f5f5;
  border: 1px solid #979797;
  box-shadow: 2px 2px 2px #999;
}
.jstree-wrapper .vakata-context ul {
  list-style: none;
  left: 100%;
  margin-top: -2.7em;
  margin-left: -4px;
}
.jstree-wrapper .vakata-context .vakata-context-right ul {
  left: auto;
  right: 100%;
  margin-left: auto;
  margin-right: -4px;
}
.jstree-wrapper .vakata-context li {
  list-style: none;
}
.jstree-wrapper .vakata-context li > a {
  display: block;
  padding: 0 2em;
  text-decoration: none;
  width: auto;
  color: #000;
  white-space: nowrap;
  line-height: 2.4em;
  text-shadow: 1px 1px 0 #fff;
  border-radius: 1px;
}
.jstree-wrapper .vakata-context li > a:hover {
  position: relative;
  background-color: #e8eff7;
  box-shadow: 0 0 2px #0a6aa1;
}
.jstree-wrapper .vakata-context li > a.vakata-context-parent {
  background-image: url(data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==);
  background-position: right center;
  background-repeat: no-repeat;
}
.jstree-wrapper .vakata-context li > a:focus {
  outline: 0;
}
.jstree-wrapper .vakata-context .vakata-context-hover > a {
  position: relative;
  background-color: #e8eff7;
  box-shadow: 0 0 2px #0a6aa1;
}
.jstree-wrapper .vakata-context .vakata-context-separator > a, .jstree-wrapper .vakata-context .vakata-context-separator > a:hover {
  background: #fff;
  border: 0;
  border-top: 1px solid #e2e3e3;
  height: 1px;
  min-height: 1px;
  max-height: 1px;
  padding: 0;
  margin: 0 0 0 2.4em;
  border-left: 1px solid #e0e0e0;
  text-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
  border-radius: 0;
}
.jstree-wrapper .vakata-context .vakata-contextmenu-disabled a, .jstree-wrapper .vakata-context .vakata-contextmenu-disabled a:hover {
  color: silver;
  background-color: transparent;
  border: 0;
  box-shadow: 0 0 0;
}
.jstree-wrapper .vakata-context li > a > i {
  text-decoration: none;
  display: inline-block;
  width: 2.4em;
  height: 2.4em;
  background: 0 0;
  margin: 0 0 0 -2em;
  vertical-align: top;
  text-align: center;
  line-height: 2.4em;
}
.jstree-wrapper .vakata-context li > a > i:empty {
  width: 2.4em;
  line-height: 2.4em;
}
.jstree-wrapper .vakata-context li > a .vakata-contextmenu-sep {
  display: inline-block;
  width: 1px;
  height: 2.4em;
  background: #fff;
  margin: 0 0.5em 0 0;
  border-left: 1px solid #e2e3e3;
}
.jstree-wrapper .vakata-context .vakata-contextmenu-shortcut {
  font-size: 0.8em;
  color: silver;
  opacity: 0.5;
  display: none;
}
.jstree-wrapper .vakata-context-rtl ul {
  left: auto;
  right: 100%;
  margin-left: auto;
  margin-right: -4px;
}
.jstree-wrapper .vakata-context-rtl li > a.vakata-context-parent {
  background-image: url(data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAINjI+AC7rWHIsPtmoxLAA7);
  background-position: left center;
  background-repeat: no-repeat;
}
.jstree-wrapper .vakata-context-rtl .vakata-context-separator > a {
  margin: 0 2.4em 0 0;
  border-left: 0;
  border-right: 1px solid #e2e3e3;
}
.jstree-wrapper .vakata-context-rtl .vakata-context-left ul {
  right: auto;
  left: 100%;
  margin-left: -4px;
  margin-right: auto;
}
.jstree-wrapper .vakata-context-rtl li > a > i {
  margin: 0 -2em 0 0;
}
.jstree-wrapper .vakata-context-rtl li > a .vakata-contextmenu-sep {
  margin: 0 0 0 0.5em;
  border-left-color: #fff;
  background: #e2e3e3;
}
.jstree-wrapper #jstree-marker {
  position: absolute;
  top: 0;
  left: 0;
  margin: -5px 0 0 0;
  padding: 0;
  border-right: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}
.jstree-wrapper #jstree-dnd {
  line-height: 16px;
  margin: 0;
  padding: 4px;
}
.jstree-wrapper #jstree-dnd .jstree-icon, .jstree-wrapper #jstree-dnd .jstree-copy {
  display: inline-block;
  text-decoration: none;
  margin: 0 2px 0 0;
  padding: 0;
  width: 16px;
  height: 16px;
}
.jstree-wrapper #jstree-dnd .jstree-ok {
  background: green;
}
.jstree-wrapper #jstree-dnd .jstree-er {
  background: red;
}
.jstree-wrapper #jstree-dnd .jstree-copy {
  margin: 0 2px;
}
.jstree-wrapper .jstree-default .jstree-node, .jstree-wrapper .jstree-default .jstree-icon {
  background-repeat: no-repeat;
  background-color: transparent;
}
.jstree-wrapper .jstree-default .jstree-anchor, .jstree-wrapper .jstree-default .jstree-animated, .jstree-wrapper .jstree-default .jstree-wholerow {
  transition: background-color 0.15s, box-shadow 0.15s;
}
.jstree-wrapper .jstree-default .jstree-hovered {
  background: #e7f4f9;
  border-radius: 2px;
  box-shadow: inset 0 0 1px #ccc;
}
.jstree-wrapper .jstree-default .jstree-context {
  background: #e7f4f9;
  border-radius: 2px;
  box-shadow: inset 0 0 1px #ccc;
}
.jstree-wrapper .jstree-default .jstree-clicked {
  background: #beebff;
  border-radius: 2px;
  box-shadow: inset 0 0 1px #999;
}
.jstree-wrapper .jstree-default .jstree-no-icons .jstree-anchor > .jstree-themeicon {
  display: none;
}
.jstree-wrapper .jstree-default .jstree-disabled {
  background: 0 0;
  color: #666;
}
.jstree-wrapper .jstree-default .jstree-disabled.jstree-hovered {
  background: 0 0;
  box-shadow: none;
}
.jstree-wrapper .jstree-default .jstree-disabled.jstree-clicked {
  background: #efefef;
}
.jstree-wrapper .jstree-default .jstree-disabled > .jstree-icon {
  opacity: 0.8;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='jstree-grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#jstree-grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
}
.jstree-wrapper .jstree-default .jstree-search {
  font-style: italic;
  color: #8b0000;
  font-weight: 700;
}
.jstree-wrapper .jstree-default .jstree-no-checkboxes .jstree-checkbox {
  display: none !important;
}
.jstree-wrapper .jstree-default.jstree-checkbox-no-clicked .jstree-clicked {
  background: 0 0;
  box-shadow: none;
}
.jstree-wrapper .jstree-default.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered {
  background: #e7f4f9;
}
.jstree-wrapper .jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked {
  background: 0 0;
}
.jstree-wrapper .jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered {
  background: #e7f4f9;
}
.jstree-wrapper .jstree-default > .jstree-striped {
  min-width: 100%;
  display: inline-block;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB/qqA+AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMNAMM9s3UAAAAXSURBVHjajcEBAQAAAIKg/H/aCQZ70AUBjAATb6YPDgAAAABJRU5ErkJggg==) left top repeat;
}
.jstree-wrapper .jstree-default > .jstree-wholerow-ul .jstree-hovered, .jstree-wrapper .jstree-default > .jstree-wholerow-ul .jstree-clicked {
  background: 0 0;
  box-shadow: none;
  border-radius: 0;
}
.jstree-wrapper .jstree-default .jstree-wholerow {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.jstree-wrapper .jstree-default .jstree-wholerow-hovered {
  background: #e7f4f9;
}
.jstree-wrapper .jstree-default .jstree-wholerow-clicked {
  background: #beebff;
  background: -webkit-linear-gradient(top, #beebff 0, #a8e4ff 100%);
  background: linear-gradient(to bottom, #beebff 0, #a8e4ff 100%);
}
.jstree-wrapper .jstree-default .jstree-node {
  min-height: 24px;
  line-height: 24px;
  margin-left: 24px;
  min-width: 24px;
}
.jstree-wrapper .jstree-default .jstree-anchor {
  line-height: 24px;
  height: 24px;
}
.jstree-wrapper .jstree-default .jstree-icon {
  width: 24px;
  height: 24px;
  line-height: 24px;
}
.jstree-wrapper .jstree-default .jstree-icon:empty {
  width: 24px;
  height: 24px;
  line-height: 24px;
}
.jstree-wrapper .jstree-default.jstree-rtl .jstree-node {
  margin-right: 24px;
}
.jstree-wrapper .jstree-default .jstree-wholerow {
  height: 24px;
}
.jstree-wrapper .jstree-default .jstree-node, .jstree-wrapper .jstree-default .jstree-icon {
  background-image: url(../jstree/default/32px.png);
}
.jstree-wrapper .jstree-default .jstree-node {
  background-position: -292px -4px;
  background-repeat: repeat-y;
}
.jstree-wrapper .jstree-default .jstree-last {
  background: 0 0;
}
.jstree-wrapper .jstree-default .jstree-open > .jstree-ocl {
  background-position: -132px -4px;
}
.jstree-wrapper .jstree-default .jstree-closed > .jstree-ocl {
  background-position: -100px -4px;
}
.jstree-wrapper .jstree-default .jstree-leaf > .jstree-ocl {
  background-position: -68px -4px;
}
.jstree-wrapper .jstree-default .jstree-themeicon {
  background-position: -260px -4px;
}
.jstree-wrapper .jstree-default > .jstree-no-dots .jstree-node, .jstree-wrapper .jstree-default > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: 0 0;
}
.jstree-wrapper .jstree-default > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -36px -4px;
}
.jstree-wrapper .jstree-default > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: -4px -4px;
}
.jstree-wrapper .jstree-default .jstree-disabled {
  background: 0 0;
}
.jstree-wrapper .jstree-default .jstree-disabled.jstree-hovered {
  background: 0 0;
}
.jstree-wrapper .jstree-default .jstree-disabled.jstree-clicked {
  background: #efefef;
}
.jstree-wrapper .jstree-default .jstree-checkbox {
  background-position: -164px -4px;
}
.jstree-wrapper .jstree-default .jstree-checkbox:hover {
  background-position: -164px -36px;
}
.jstree-wrapper .jstree-default.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox, .jstree-wrapper .jstree-default .jstree-checked > .jstree-checkbox {
  background-position: -228px -4px;
}
.jstree-wrapper .jstree-default.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover, .jstree-wrapper .jstree-default .jstree-checked > .jstree-checkbox:hover {
  background-position: -228px -36px;
}
.jstree-wrapper .jstree-default .jstree-anchor > .jstree-undetermined {
  background-position: -196px -4px;
}
.jstree-wrapper .jstree-default .jstree-anchor > .jstree-undetermined:hover {
  background-position: -196px -36px;
}
.jstree-wrapper .jstree-default .jstree-checkbox-disabled {
  opacity: 0.8;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='jstree-grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#jstree-grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
}
.jstree-wrapper .jstree-default > .jstree-striped {
  background-size: auto 48px;
}
.jstree-wrapper .jstree-default.jstree-rtl .jstree-node {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==);
  background-position: 100% 1px;
  background-repeat: repeat-y;
}
.jstree-wrapper .jstree-default.jstree-rtl .jstree-last {
  background: 0 0;
}
.jstree-wrapper .jstree-default.jstree-rtl .jstree-open > .jstree-ocl {
  background-position: -132px -36px;
}
.jstree-wrapper .jstree-default.jstree-rtl .jstree-closed > .jstree-ocl {
  background-position: -100px -36px;
}
.jstree-wrapper .jstree-default.jstree-rtl .jstree-leaf > .jstree-ocl {
  background-position: -68px -36px;
}
.jstree-wrapper .jstree-default.jstree-rtl > .jstree-no-dots .jstree-node, .jstree-wrapper .jstree-default.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: 0 0;
}
.jstree-wrapper .jstree-default.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -36px -36px;
}
.jstree-wrapper .jstree-default.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: -4px -36px;
}
.jstree-wrapper .jstree-default .jstree-themeicon-custom {
  background-color: transparent;
  background-image: none;
  background-position: 0 0;
}
.jstree-wrapper .jstree-default > .jstree-container-ul .jstree-loading > .jstree-ocl {
  background: url(../jstree/default/throbber.gif) center center no-repeat;
}
.jstree-wrapper .jstree-default .jstree-file {
  background: url(../jstree/default/32px.png) -100px -68px no-repeat;
}
.jstree-wrapper .jstree-default .jstree-folder {
  background: url(../jstree/default/32px.png) -260px -4px no-repeat;
}
.jstree-wrapper .jstree-default > .jstree-container-ul > .jstree-node {
  margin-left: 0;
  margin-right: 0;
}
.jstree-wrapper #jstree-dnd.jstree-default {
  line-height: 24px;
  padding: 0 4px;
}
.jstree-wrapper #jstree-dnd.jstree-default .jstree-ok, .jstree-wrapper #jstree-dnd.jstree-default .jstree-er {
  background-image: url(../jstree/default/32px.png);
  background-repeat: no-repeat;
  background-color: transparent;
}
.jstree-wrapper #jstree-dnd.jstree-default i {
  background: 0 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
}
.jstree-wrapper #jstree-dnd.jstree-default .jstree-ok {
  background-position: -4px -68px;
}
.jstree-wrapper #jstree-dnd.jstree-default .jstree-er {
  background-position: -36px -68px;
}
.jstree-wrapper .jstree-default .jstree-ellipsis {
  overflow: hidden;
}
.jstree-wrapper .jstree-default .jstree-ellipsis .jstree-anchor {
  width: calc(100% - 29px);
  text-overflow: ellipsis;
  overflow: hidden;
}
.jstree-wrapper .jstree-default .jstree-ellipsis.jstree-no-icons .jstree-anchor {
  width: calc(100% - 5px);
}
.jstree-wrapper .jstree-default.jstree-rtl .jstree-node {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==);
}
.jstree-wrapper .jstree-default.jstree-rtl .jstree-last {
  background: 0 0;
}
.jstree-wrapper .jstree-default-small .jstree-node {
  min-height: 18px;
  line-height: 18px;
  margin-left: 18px;
  min-width: 18px;
}
.jstree-wrapper .jstree-default-small .jstree-anchor {
  line-height: 18px;
  height: 18px;
}
.jstree-wrapper .jstree-default-small .jstree-icon {
  width: 18px;
  height: 18px;
  line-height: 18px;
}
.jstree-wrapper .jstree-default-small .jstree-icon:empty {
  width: 18px;
  height: 18px;
  line-height: 18px;
}
.jstree-wrapper .jstree-default-small.jstree-rtl .jstree-node {
  margin-right: 18px;
}
.jstree-wrapper .jstree-default-small .jstree-wholerow {
  height: 18px;
}
.jstree-wrapper .jstree-default-small .jstree-node, .jstree-wrapper .jstree-default-small .jstree-icon {
  background-image: url(../jstree/default/32px.png);
}
.jstree-wrapper .jstree-default-small .jstree-node {
  background-position: -295px -7px;
  background-repeat: repeat-y;
}
.jstree-wrapper .jstree-default-small .jstree-last {
  background: 0 0;
}
.jstree-wrapper .jstree-default-small .jstree-open > .jstree-ocl {
  background-position: -135px -7px;
}
.jstree-wrapper .jstree-default-small .jstree-closed > .jstree-ocl {
  background-position: -103px -7px;
}
.jstree-wrapper .jstree-default-small .jstree-leaf > .jstree-ocl {
  background-position: -71px -7px;
}
.jstree-wrapper .jstree-default-small .jstree-themeicon {
  background-position: -263px -7px;
}
.jstree-wrapper .jstree-default-small > .jstree-no-dots .jstree-node, .jstree-wrapper .jstree-default-small > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: 0 0;
}
.jstree-wrapper .jstree-default-small > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -39px -7px;
}
.jstree-wrapper .jstree-default-small > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: -7px -7px;
}
.jstree-wrapper .jstree-default-small .jstree-disabled {
  background: 0 0;
}
.jstree-wrapper .jstree-default-small .jstree-disabled.jstree-hovered {
  background: 0 0;
}
.jstree-wrapper .jstree-default-small .jstree-disabled.jstree-clicked {
  background: #efefef;
}
.jstree-wrapper .jstree-default-small .jstree-checkbox {
  background-position: -167px -7px;
}
.jstree-wrapper .jstree-default-small .jstree-checkbox:hover {
  background-position: -167px -39px;
}
.jstree-wrapper .jstree-default-small.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox, .jstree-wrapper .jstree-default-small .jstree-checked > .jstree-checkbox {
  background-position: -231px -7px;
}
.jstree-wrapper .jstree-default-small.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover, .jstree-wrapper .jstree-default-small .jstree-checked > .jstree-checkbox:hover {
  background-position: -231px -39px;
}
.jstree-wrapper .jstree-default-small .jstree-anchor > .jstree-undetermined {
  background-position: -199px -7px;
}
.jstree-wrapper .jstree-default-small .jstree-anchor > .jstree-undetermined:hover {
  background-position: -199px -39px;
}
.jstree-wrapper .jstree-default-small .jstree-checkbox-disabled {
  opacity: 0.8;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='jstree-grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#jstree-grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
}
.jstree-wrapper .jstree-default-small > .jstree-striped {
  background-size: auto 36px;
}
.jstree-wrapper .jstree-default-small.jstree-rtl .jstree-node {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==);
  background-position: 100% 1px;
  background-repeat: repeat-y;
}
.jstree-wrapper .jstree-default-small.jstree-rtl .jstree-last {
  background: 0 0;
}
.jstree-wrapper .jstree-default-small.jstree-rtl .jstree-open > .jstree-ocl {
  background-position: -135px -39px;
}
.jstree-wrapper .jstree-default-small.jstree-rtl .jstree-closed > .jstree-ocl {
  background-position: -103px -39px;
}
.jstree-wrapper .jstree-default-small.jstree-rtl .jstree-leaf > .jstree-ocl {
  background-position: -71px -39px;
}
.jstree-wrapper .jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-node, .jstree-wrapper .jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: 0 0;
}
.jstree-wrapper .jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -39px -39px;
}
.jstree-wrapper .jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: -7px -39px;
}
.jstree-wrapper .jstree-default-small .jstree-themeicon-custom {
  background-color: transparent;
  background-image: none;
  background-position: 0 0;
}
.jstree-wrapper .jstree-default-small > .jstree-container-ul .jstree-loading > .jstree-ocl {
  background: url(throbber.gif) center center no-repeat;
}
.jstree-wrapper .jstree-default-small .jstree-file {
  background: url(../jstree/default/32px.png) -103px -71px no-repeat;
}
.jstree-wrapper .jstree-default-small .jstree-folder {
  background: url(../jstree/default/32px.png) -263px -7px no-repeat;
}
.jstree-wrapper .jstree-default-small > .jstree-container-ul > .jstree-node {
  margin-left: 0;
  margin-right: 0;
}
.jstree-wrapper #jstree-dnd.jstree-default-small {
  line-height: 18px;
  padding: 0 4px;
}
.jstree-wrapper #jstree-dnd.jstree-default-small .jstree-ok, .jstree-wrapper #jstree-dnd.jstree-default-small .jstree-er {
  background-image: url(../jstree/default/32px.png);
  background-repeat: no-repeat;
  background-color: transparent;
}
.jstree-wrapper #jstree-dnd.jstree-default-small i {
  background: 0 0;
  width: 18px;
  height: 18px;
  line-height: 18px;
}
.jstree-wrapper #jstree-dnd.jstree-default-small .jstree-ok {
  background-position: -7px -71px;
}
.jstree-wrapper #jstree-dnd.jstree-default-small .jstree-er {
  background-position: -39px -71px;
}
.jstree-wrapper .jstree-default-small .jstree-ellipsis {
  overflow: hidden;
}
.jstree-wrapper .jstree-default-small .jstree-ellipsis .jstree-anchor {
  width: calc(100% - 23px);
  text-overflow: ellipsis;
  overflow: hidden;
}
.jstree-wrapper .jstree-default-small .jstree-ellipsis.jstree-no-icons .jstree-anchor {
  width: calc(100% - 5px);
}
.jstree-wrapper .jstree-default-small.jstree-rtl .jstree-node {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAACAQMAAABv1h6PAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMHBgAAiABBI4gz9AAAAABJRU5ErkJggg==);
}
.jstree-wrapper .jstree-default-small.jstree-rtl .jstree-last {
  background: 0 0;
}
.jstree-wrapper .jstree-default-large .jstree-node {
  min-height: 32px;
  line-height: 32px;
  margin-left: 32px;
  min-width: 32px;
}
.jstree-wrapper .jstree-default-large .jstree-anchor {
  line-height: 32px;
  height: 32px;
}
.jstree-wrapper .jstree-default-large .jstree-icon {
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.jstree-wrapper .jstree-default-large .jstree-icon:empty {
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.jstree-wrapper .jstree-default-large.jstree-rtl .jstree-node {
  margin-right: 32px;
}
.jstree-wrapper .jstree-default-large .jstree-wholerow {
  height: 32px;
}
.jstree-wrapper .jstree-default-large .jstree-node, .jstree-wrapper .jstree-default-large .jstree-icon {
  background-image: url(../jstree/default/32px.png);
}
.jstree-wrapper .jstree-default-large .jstree-node {
  background-position: -288px 0;
  background-repeat: repeat-y;
}
.jstree-wrapper .jstree-default-large .jstree-last {
  background: 0 0;
}
.jstree-wrapper .jstree-default-large .jstree-open > .jstree-ocl {
  background-position: -128px 0;
}
.jstree-wrapper .jstree-default-large .jstree-closed > .jstree-ocl {
  background-position: -96px 0;
}
.jstree-wrapper .jstree-default-large .jstree-leaf > .jstree-ocl {
  background-position: -64px 0;
}
.jstree-wrapper .jstree-default-large .jstree-themeicon {
  background-position: -256px 0;
}
.jstree-wrapper .jstree-default-large > .jstree-no-dots .jstree-node, .jstree-wrapper .jstree-default-large > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: 0 0;
}
.jstree-wrapper .jstree-default-large > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -32px 0;
}
.jstree-wrapper .jstree-default-large > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: 0 0;
}
.jstree-wrapper .jstree-default-large .jstree-disabled {
  background: 0 0;
}
.jstree-wrapper .jstree-default-large .jstree-disabled.jstree-hovered {
  background: 0 0;
}
.jstree-wrapper .jstree-default-large .jstree-disabled.jstree-clicked {
  background: #efefef;
}
.jstree-wrapper .jstree-default-large .jstree-checkbox {
  background-position: -160px 0;
}
.jstree-wrapper .jstree-default-large .jstree-checkbox:hover {
  background-position: -160px -32px;
}
.jstree-wrapper .jstree-default-large.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox, .jstree-wrapper .jstree-default-large .jstree-checked > .jstree-checkbox {
  background-position: -224px 0;
}
.jstree-wrapper .jstree-default-large.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover, .jstree-wrapper .jstree-default-large .jstree-checked > .jstree-checkbox:hover {
  background-position: -224px -32px;
}
.jstree-wrapper .jstree-default-large .jstree-anchor > .jstree-undetermined {
  background-position: -192px 0;
}
.jstree-wrapper .jstree-default-large .jstree-anchor > .jstree-undetermined:hover {
  background-position: -192px -32px;
}
.jstree-wrapper .jstree-default-large .jstree-checkbox-disabled {
  opacity: 0.8;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='jstree-grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#jstree-grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
}
.jstree-wrapper .jstree-default-large > .jstree-striped {
  background-size: auto 64px;
}
.jstree-wrapper .jstree-default-large.jstree-rtl .jstree-node {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==);
  background-position: 100% 1px;
  background-repeat: repeat-y;
}
.jstree-wrapper .jstree-default-large.jstree-rtl .jstree-last {
  background: 0 0;
}
.jstree-wrapper .jstree-default-large.jstree-rtl .jstree-open > .jstree-ocl {
  background-position: -128px -32px;
}
.jstree-wrapper .jstree-default-large.jstree-rtl .jstree-closed > .jstree-ocl {
  background-position: -96px -32px;
}
.jstree-wrapper .jstree-default-large.jstree-rtl .jstree-leaf > .jstree-ocl {
  background-position: -64px -32px;
}
.jstree-wrapper .jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-node, .jstree-wrapper .jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: 0 0;
}
.jstree-wrapper .jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -32px -32px;
}
.jstree-wrapper .jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: 0 -32px;
}
.jstree-wrapper .jstree-default-large .jstree-themeicon-custom {
  background-color: transparent;
  background-image: none;
  background-position: 0 0;
}
.jstree-wrapper .jstree-default-large > .jstree-container-ul .jstree-loading > .jstree-ocl {
  background: url(throbber.gif) center center no-repeat;
}
.jstree-wrapper .jstree-default-large .jstree-file {
  background: url(../jstree/default/32px.png) -96px -64px no-repeat;
}
.jstree-wrapper .jstree-default-large .jstree-folder {
  background: url(../jstree/default/32px.png) -256px 0 no-repeat;
}
.jstree-wrapper .jstree-default-large > .jstree-container-ul > .jstree-node {
  margin-left: 0;
  margin-right: 0;
}
.jstree-wrapper #jstree-dnd.jstree-default-large {
  line-height: 32px;
  padding: 0 4px;
}
.jstree-wrapper #jstree-dnd.jstree-default-large .jstree-ok, .jstree-wrapper #jstree-dnd.jstree-default-large .jstree-er {
  background-image: url(../jstree/default/32px.png);
  background-repeat: no-repeat;
  background-color: transparent;
}
.jstree-wrapper #jstree-dnd.jstree-default-large i {
  background: 0 0;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.jstree-wrapper #jstree-dnd.jstree-default-large .jstree-ok {
  background-position: 0 -64px;
}
.jstree-wrapper #jstree-dnd.jstree-default-large .jstree-er {
  background-position: -32px -64px;
}
.jstree-wrapper .jstree-default-large .jstree-ellipsis {
  overflow: hidden;
}
.jstree-wrapper .jstree-default-large .jstree-ellipsis .jstree-anchor {
  width: calc(100% - 37px);
  text-overflow: ellipsis;
  overflow: hidden;
}
.jstree-wrapper .jstree-default-large .jstree-ellipsis.jstree-no-icons .jstree-anchor {
  width: calc(100% - 5px);
}
.jstree-wrapper .jstree-default-large.jstree-rtl .jstree-node {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAACAQMAAAAD0EyKAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjgIIGBgABCgCBvVLXcAAAAABJRU5ErkJggg==);
}
.jstree-wrapper .jstree-default-large.jstree-rtl .jstree-last {
  background: 0 0;
}
@media (max-width: 768px) {
  .jstree-wrapper #jstree-dnd.jstree-dnd-responsive {
    line-height: 40px;
    font-weight: 700;
    font-size: 1.1em;
    text-shadow: 1px 1px #fff;
  }
  .jstree-wrapper #jstree-dnd.jstree-dnd-responsive > i {
    background: 0 0;
    width: 40px;
    height: 40px;
  }
  .jstree-wrapper #jstree-dnd.jstree-dnd-responsive > .jstree-ok {
    background-image: url(40px.png);
    background-position: 0 -200px;
    background-size: 120px 240px;
  }
  .jstree-wrapper #jstree-dnd.jstree-dnd-responsive > .jstree-er {
    background-image: url(40px.png);
    background-position: -40px -200px;
    background-size: 120px 240px;
  }
  .jstree-wrapper #jstree-marker.jstree-dnd-responsive {
    border-left-width: 10px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    margin-top: -10px;
  }
}
@media (max-width: 768px) {
  .jstree-wrapper .jstree-default-responsive .jstree-icon {
    background-image: url(40px.png);
  }
  .jstree-wrapper .jstree-default-responsive .jstree-node, .jstree-wrapper .jstree-default-responsive .jstree-leaf > .jstree-ocl {
    background: 0 0;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-node {
    min-height: 40px;
    line-height: 40px;
    margin-left: 40px;
    min-width: 40px;
    white-space: nowrap;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-anchor {
    line-height: 40px;
    height: 40px;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-icon, .jstree-wrapper .jstree-default-responsive .jstree-icon:empty {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  .jstree-wrapper .jstree-default-responsive > .jstree-container-ul > .jstree-node {
    margin-left: 0;
  }
  .jstree-wrapper .jstree-default-responsive.jstree-rtl .jstree-node {
    margin-left: 0;
    margin-right: 40px;
    background: 0 0;
  }
  .jstree-wrapper .jstree-default-responsive.jstree-rtl .jstree-container-ul > .jstree-node {
    margin-right: 0;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-ocl, .jstree-wrapper .jstree-default-responsive .jstree-themeicon, .jstree-wrapper .jstree-default-responsive .jstree-checkbox {
    background-size: 120px 240px;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-leaf > .jstree-ocl, .jstree-wrapper .jstree-default-responsive.jstree-rtl .jstree-leaf > .jstree-ocl {
    background: 0 0;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-open > .jstree-ocl {
    background-position: 0 0 !important;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-closed > .jstree-ocl {
    background-position: 0 -40px !important;
  }
  .jstree-wrapper .jstree-default-responsive.jstree-rtl .jstree-closed > .jstree-ocl {
    background-position: -40px 0 !important;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-themeicon {
    background-position: -40px -40px;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-checkbox, .jstree-wrapper .jstree-default-responsive .jstree-checkbox:hover {
    background-position: -40px -80px;
  }
  .jstree-wrapper .jstree-default-responsive.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox, .jstree-wrapper .jstree-default-responsive.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover, .jstree-wrapper .jstree-default-responsive .jstree-checked > .jstree-checkbox, .jstree-wrapper .jstree-default-responsive .jstree-checked > .jstree-checkbox:hover {
    background-position: 0 -80px;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-anchor > .jstree-undetermined, .jstree-wrapper .jstree-default-responsive .jstree-anchor > .jstree-undetermined:hover {
    background-position: 0 -120px;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-anchor {
    font-weight: 700;
    font-size: 1.1em;
    text-shadow: 1px 1px #fff;
  }
  .jstree-wrapper .jstree-default-responsive > .jstree-striped {
    background: 0 0;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-wholerow {
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(64, 64, 64, 0.2);
    background: #ebebeb;
    height: 40px;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-wholerow-hovered {
    background: #e7f4f9;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-wholerow-clicked {
    background: #beebff;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-children .jstree-last > .jstree-wholerow {
    box-shadow: inset 0 -6px 3px -5px #666;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-children .jstree-open > .jstree-wholerow {
    box-shadow: inset 0 6px 3px -5px #666;
    border-top: 0;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-children .jstree-open + .jstree-open {
    box-shadow: none;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-node, .jstree-wrapper .jstree-default-responsive .jstree-icon, .jstree-wrapper .jstree-default-responsive .jstree-node > .jstree-ocl, .jstree-wrapper .jstree-default-responsive .jstree-themeicon, .jstree-wrapper .jstree-default-responsive .jstree-checkbox {
    background-image: url(40px.png);
    background-size: 120px 240px;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-node {
    background-position: -80px 0;
    background-repeat: repeat-y;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-last {
    background: 0 0;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-leaf > .jstree-ocl {
    background-position: -40px -120px;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-last > .jstree-ocl {
    background-position: -40px -160px;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-themeicon-custom {
    background-color: transparent;
    background-image: none;
    background-position: 0 0;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-file {
    background: url(40px.png) 0 -160px no-repeat;
    background-size: 120px 240px;
  }
  .jstree-wrapper .jstree-default-responsive .jstree-folder {
    background: url(40px.png) -40px -40px no-repeat;
    background-size: 120px 240px;
  }
  .jstree-wrapper .jstree-default-responsive > .jstree-container-ul > .jstree-node {
    margin-left: 0;
    margin-right: 0;
  }
}
.jstree-wrapper .jstree-default .jstree-search {
  color: var(--main-color);
}
.jstree-wrapper .jstree-default .jstree-node {
  padding: 5px 10px;
  background-image: none !important;
}
.jstree-wrapper .jstree-default .jstree-anchor {
  min-width: 285px;
  line-height: 29px;
  height: 32px;
  border-radius: 5px;
}
.jstree-wrapper .jstree-default .jstree-anchor.jstree-hovered {
  background: #fafafa;
}
.jstree-wrapper .jstree-default .jstree-icon:empty {
  line-height: 29px;
  height: 32px;
}
.jstree-wrapper .jstree-default .jstree-clicked {
  background: var(--main-color) !important;
  color: #fff;
}
.jstree-wrapper .jstree-default .jstree-node {
  padding: 4px 0px;
}
.jstree-wrapper .jstree-default .jstree-leaf > .jstree-ocl, .jstree-wrapper .jstree-default .jstree-icon {
  background-image: none;
}
.jstree-wrapper .jstree-default .jstree-closed > .jstree-ocl {
  background-position: -132px -68px !important;
  background-image: url(../jstree/default/32px_6.png?12345);
}
.jstree-wrapper .jstree-default .jstree-open > .jstree-ocl {
  background-position: -163px -68px !important;
  background-image: url(../jstree/default/32px_6.png?12345);
}
.jstree-wrapper .page-chatbar .jstree-default .jstree-anchor {
  min-width: 200px;
  padding: 0 10px;
}

.school-group-tree {
  background: #fff;
}
.school-group-tree .schoolHeader {
  position: relative;
  padding-bottom: 4px;
  font-size: 18px;
}
.school-group-tree .schoolHeader:before {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: var(--main-color);
}

.teacher-courses-index .course-block div.paged_block .paged_item:nth-child(-n+4) {
  width: 48%;
  height: 100px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  margin: 1%;
  border-radius: 10px;
  position: relative;
  font-size: 0.8em;
  transition: background 0.2s ease-in-out;
  float: right;
}
.teacher-courses-index .course-block div.paged_block .paged_item:nth-child(-n+4) a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  display: block;
  font-size: 14px;
  transition: color 0.2s ease-in-out;
  line-height: inherit !important;
  text-align: right;
  padding-top: 15% !important;
  padding-left: 55% !important;
}
.teacher-courses-index .course-block div.paged_block .paged_item:nth-child(-n+4):before {
  content: "\f0b1";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 3em;
  position: absolute;
  bottom: 20px;
  transition: color 0.2s ease-in-out;
  left: 15px;
}
.teacher-courses-index .course-block div.paged_block .paged_item:nth-child(-n+4):hover {
  background: #FFF;
}
.teacher-courses-index .paged_item.browse-content:before {
  content: "\f0b1" !important;
}
.teacher-courses-index .paged_item.student-list:before {
  content: "\f0c0" !important;
}
.teacher-courses-index .paged_item.grade-managment:before {
  content: "\f046" !important;
}
.teacher-courses-index .main-blocks:nth-child(6n+1).course-block div.paged_block .paged_item:nth-child(-n+4):hover a,
.teacher-courses-index .main-blocks:nth-child(6n+1).course-block div.paged_block .paged_item:nth-child(-n+4):hover:before {
  color: #FC3176 !important;
}
.teacher-courses-index .main-blocks:nth-child(6n+2).course-block div.paged_block .paged_item:nth-child(-n+4):hover a,
.teacher-courses-index .main-blocks:nth-child(6n+2).course-block div.paged_block .paged_item:nth-child(-n+4):hover:before {
  color: #21B9D0 !important;
}
.teacher-courses-index .main-blocks:nth-child(6n+3).course-block div.paged_block .paged_item:nth-child(-n+4):hover a,
.teacher-courses-index .main-blocks:nth-child(6n+3).course-block div.paged_block .paged_item:nth-child(-n+4):hover:before {
  color: #7D2989 !important;
}
.teacher-courses-index .main-blocks:nth-child(6n+4).course-block div.paged_block .paged_item:nth-child(-n+4):hover a,
.teacher-courses-index .main-blocks:nth-child(6n+4).course-block div.paged_block .paged_item:nth-child(-n+4):hover:before {
  color: #79060F !important;
}
.teacher-courses-index .main-blocks:nth-child(6n+5).course-block div.paged_block .paged_item:nth-child(-n+4):hover a,
.teacher-courses-index .main-blocks:nth-child(6n+5).course-block div.paged_block .paged_item:nth-child(-n+4):hover:before {
  color: #BA8641 !important;
}
.teacher-courses-index .main-blocks:nth-child(6n+6).course-block div.paged_block .paged_item:nth-child(-n+4):hover a,
.teacher-courses-index .main-blocks:nth-child(6n+6).course-block div.paged_block .paged_item:nth-child(-n+4):hover:before {
  color: #1C1D7A !important;
}
.teacher-courses-index .paged_item.grade-managment.hidden_visibility {
  visibility: hidden !important;
}

/**! hopscotch - v0.3.1
*
* Copyright 2017 LinkedIn Corp. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
 * This fade animation is based on Dan Eden's animate.css (http://daneden.me/animate/), under the terms of the MIT license.
 *
 * Copyright 2013 Dan Eden.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -ms-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -ms-transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-down {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-right {
  -webkit-animation-name: fadeInRight;
  -moz-animation-name: fadeInRight;
  -o-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-left {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

div.hopscotch-bubble .hopscotch-nav-button {
  /* borrowed from katy styles */
  font-weight: bold;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  margin: 0;
  overflow: visible;
  text-decoration: none !important;
  width: auto;
  padding: 0 10px;
  height: 26px;
  line-height: 24px;
  font-size: 12px;
  *zoom: 1;
  white-space: nowrap;
  display: -moz-inline-stack;
  display: inline-block;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div.hopscotch-bubble .hopscotch-nav-button:hover {
  *zoom: 1;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

div.hopscotch-bubble .hopscotch-nav-button:active {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
}

div.hopscotch-bubble .hopscotch-nav-button.next {
  border-color: #1b5480;
  color: #fff;
  margin: 0 0 0 10px;
  /* HS specific*/
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background-color: #287bbc;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr="#287bbc", endColorstr="#23639a");
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #287bbc), color-stop(100%, #23639a));
  background-image: -webkit-linear-gradient(to bottom, #287bbc 0%, #23639a 100%);
  background-image: -moz-linear-gradient(to bottom, #287bbc 0%, #23639a 100%);
  background-image: -o-linear-gradient(to bottom, #287bbc 0%, #23639a 100%);
  background-image: linear-gradient(to bottom, #287bbc 0%, #23639a 100%);
}

div.hopscotch-bubble .hopscotch-nav-button.next:hover {
  background-color: #2672ae;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr="#2672ae", endColorstr="#1e4f7e");
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2672ae), color-stop(100%, #1e4f7e));
  background-image: -webkit-linear-gradient(to bottom, #2672ae 0%, #1e4f7e 100%);
  background-image: -moz-linear-gradient(to bottom, #2672ae 0%, #1e4f7e 100%);
  background-image: -o-linear-gradient(to bottom, #2672ae 0%, #1e4f7e 100%);
  background-image: linear-gradient(to bottom, #2672ae 0%, #1e4f7e 100%);
}

div.hopscotch-bubble .hopscotch-nav-button.prev {
  border-color: #a7a7a7;
  color: #444;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: #f2f2f2;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr="#f2f2f2", endColorstr="#e9e9e9");
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(100%, #e9e9e9));
  background-image: -webkit-linear-gradient(to bottom, #f2f2f2 0%, #e9e9e9 100%);
  background-image: -moz-linear-gradient(to bottom, #f2f2f2 0%, #e9e9e9 100%);
  background-image: -o-linear-gradient(to bottom, #f2f2f2 0%, #e9e9e9 100%);
  background-image: linear-gradient(to bottom, #f2f2f2 0%, #e9e9e9 100%);
}

div.hopscotch-bubble .hopscotch-nav-button.prev:hover {
  background-color: #e8e8e8;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr="#FFE8E8E8", endColorstr="#FFA9A9A9");
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8e8e8), color-stop(13%, #e3e3e3), color-stop(32%, #d7d7d7), color-stop(71%, #b9b9b9), color-stop(100%, #a9a9a9));
  background-image: -webkit-linear-gradient(to bottom, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
  background-image: -moz-linear-gradient(to bottom, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
  background-image: -o-linear-gradient(to bottom, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
  background-image: linear-gradient(to bottom, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%);
}

div.hopscotch-bubble {
  background-color: #fff;
  border: 5px solid #000000;
  /* default */
  border: 5px solid rgba(0, 0, 0, 0.3);
  /* transparent, if supported */
  color: #444;
  font-family: "Roboto", Arial;
  font-size: 13px;
  position: absolute;
  z-index: 999999;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -moz-background-clip: padding;
  /* for Mozilla browsers*/
  -webkit-background-clip: padding;
  /* Webkit */
  background-clip: padding-box;
  /*  browsers with full support */
}

div.hopscotch-bubble * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

div.hopscotch-bubble.animate {
  -moz-transition-property: top, left;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-property: top, left;
  -ms-transition-duration: 1s;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-property: top, left;
  -o-transition-duration: 1s;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-property: top, left;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: top, left;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

div.hopscotch-bubble.invisible {
  opacity: 0;
}

div.hopscotch-bubble.hide,
div.hopscotch-bubble .hide,
div.hopscotch-bubble .hide-all {
  display: none;
}

div.hopscotch-bubble h3 {
  color: #444;
  font-family: "Roboto", Arial;
  font-size: 16px;
  font-weight: bold;
  line-height: 19px;
  margin: -1px 15px 0 0;
  padding: 0;
}

div.hopscotch-bubble .hopscotch-bubble-container {
  padding: 15px;
  position: relative;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  /* to fix text flickering */
}

div.hopscotch-bubble .hopscotch-content {
  font-family: "Roboto", Arial;
  font-weight: normal;
  line-height: 17px;
  margin: -5px 0 11px;
  padding-top: 8px;
}

div.hopscotch-bubble .hopscotch-bubble-content {
  margin: 0 0 0 40px;
}

div.hopscotch-bubble.no-number .hopscotch-bubble-content {
  margin: 0;
}

div.hopscotch-bubble .hopscotch-bubble-close {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  color: #000;
  background: transparent url(../../img/sprite-green.png) -192px -92px no-repeat;
  display: block;
  padding: 8px;
  position: absolute;
  text-decoration: none;
  text-indent: -9999px;
  width: 8px;
  height: 8px;
  top: 0;
  left: 0;
}

div.hopscotch-bubble .hopscotch-bubble-close.hide,
div.hopscotch-bubble .hopscotch-bubble-close.hide-all {
  display: none;
}

div.hopscotch-bubble .hopscotch-bubble-number {
  background: transparent url(../../img/sprite-green.png) 0 0 no-repeat;
  color: #fff;
  display: block;
  float: right;
  font-size: 17px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px 0 0;
  text-align: center;
  width: 30px;
  height: 30px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container {
  position: absolute;
  width: 34px;
  height: 34px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container .hopscotch-bubble-arrow,
div.hopscotch-bubble .hopscotch-bubble-arrow-container .hopscotch-bubble-arrow-border {
  width: 0;
  height: 0;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.up {
  top: -22px;
  left: 10px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {
  border-bottom: 17px solid #fff;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  position: relative;
  top: -10px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
  border-bottom: 17px solid #000000;
  border-bottom: 17px solid rgba(0, 0, 0, 0.5);
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.down {
  bottom: -39px;
  left: 10px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow {
  border-top: 17px solid #fff;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  position: relative;
  top: -24px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
  border-top: 17px solid #000000;
  border-top: 17px solid rgba(0, 0, 0, 0.5);
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.left {
  top: 10px;
  left: -22px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow {
  border-bottom: 17px solid transparent;
  border-right: 17px solid #fff;
  border-top: 17px solid transparent;
  position: relative;
  left: 7px;
  top: -34px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
  border-right: 17px solid #000000;
  border-right: 17px solid rgba(0, 0, 0, 0.5);
  border-bottom: 17px solid transparent;
  border-top: 17px solid transparent;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.right {
  top: 10px;
  right: -39px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow {
  border-bottom: 17px solid transparent;
  border-left: 17px solid #fff;
  border-top: 17px solid transparent;
  position: relative;
  left: -7px;
  top: -34px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
  border-left: 17px solid #000000;
  border-left: 17px solid rgba(0, 0, 0, 0.5);
  border-bottom: 17px solid transparent;
  border-top: 17px solid transparent;
}

div.hopscotch-bubble .hopscotch-actions {
  margin: 10px 0 0;
  text-align: left;
}

/*
 * jquery-filestyle
 * doc: http://markusslima.github.io/jquery-filestyle/
 * github: https://github.com/markusslima/jquery-filestyle
 *
 * Copyright (c) 2015 Markus Vinicius da Silva Lima
 * Version 1.5.1
 * Licensed under the MIT license.
 */
.jfilestyle {
  display: inline-block;
  margin: 0px 0px 10px 0px;
  padding: 0px;
  position: relative;
  border-collapse: separate;
}

div.jfilestyle label, div.jfilestyle input {
  font-family: sans-serif;
}

div.jfilestyle input {
  border: 1px solid #c0c0c0;
  background: #d9d9d9;
  margin: 0px -5px 0px 0px;
  vertical-align: middle;
  padding: 7px 14px;
  font-size: 14px;
  border-radius: 4px;
  color: #8d8d8d;
  cursor: default;
  line-height: normal;
}

div.jfilestyle label {
  display: inline-block;
  border: 1px solid #c0c0c0;
  background: #ffffff;
  padding: 7px 14px;
  color: #0662ba;
  vertical-align: middle;
  line-height: normal;
  text-align: center;
  margin: 0px;
  font-size: 14px;
  width: auto;
  border-radius: 4px;
  font-weight: normal;
}

div.jfilestyle.jfilestyle-corner input:first-child {
  border-right: 0;
}

div.jfilestyle.jfilestyle-corner input:last-child {
  border-left: 0;
}

div.jfilestyle.jfilestyle-corner input:first-child,
div.jfilestyle.jfilestyle-corner span:first-child > label {
  border-radius: 4px 0 0 4px;
}

div.jfilestyle.jfilestyle-corner input:last-child,
div.jfilestyle.jfilestyle-corner span:last-child > label {
  border-radius: 0 4px 4px 0;
}

div.jfilestyle label[disabled] {
  pointer-events: none;
  opacity: 0.6;
  filter: alpha(opacity=65);
  cursor: not-allowed;
}

div.jfilestyle label:hover {
  cursor: pointer;
  opacity: 0.9;
}

div.jfilestyle .count-jfilestyle {
  background: #303030;
  color: #fff;
  border-radius: 50%;
  padding: 1px 5px;
  font-size: 12px;
  vertical-align: middle;
}

.recorder-modal .main-controls {
  padding: 0.5rem 0;
}

.recorder-modal canvas {
  display: block;
  margin-bottom: 0.5rem;
  width: 100%;
}

.recorder-modal .main-controls #buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.recorder-modal .main-controls #buttons button {
  font-size: 1rem;
  padding: 1rem;
  width: calc(50% - 0.25rem);
}

.recorder-modal .main-controls button {
  font-size: 1rem;
  background: #0088cc;
  text-align: center;
  color: white;
  border: none;
  transition: all 0.2s;
  padding: 0.5rem;
}

.recorder-modal .main-controls button:hover, .recorder-modal .main-controls button:focus {
  box-shadow: inset 0px 0px 10px white;
  background: #0ae;
}

.recorder-modal .main-controls button:active {
  box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.5);
  transform: translateY(2px);
}

.recorder-modal button[disabled] {
  background: #CCC;
  pointer-events: none;
}

/* Make the clips use as much space as possible, and
 * also show a scrollbar when there are too many clips to show
 * in the available space */
.recorder-modal .sound-clips {
  flex: 1;
  overflow: auto;
}

.recorder-modal .clip {
  padding-bottom: 1rem;
}

.recorder-modal audio {
  width: 100%;
  display: block;
  margin: 1rem auto 0.5rem;
}

.recorder-modal .clip p {
  display: inline-block;
  font-size: 1rem;
}

.recorder-modal .clip button {
  font-size: 1rem;
  float: right;
  width: 50%;
  color: #FFF;
}

.recorder-modal button.delete {
  background: #F44336;
  padding: 0.5rem 0.75rem;
}

.recorder-modal button.add {
  background: #4CAF50;
  padding: 0.5rem 0.75rem;
}

audio.voice-note {
  display: block;
  margin: 8px;
  max-width: 95%;
}

.classroom-attention {
  background: #fff;
  border-radius: 8px;
}

.classroom-attention > .col-lg-8 {
  border-right: 1px solid #EEE;
  border-left: 1px solid #EEE;
}

.faces-count span {
  color: #FFF;
}

.export-users-cards-wrapper .school_logo_header {
  display: none;
}
.export-users-cards-wrapper .search_box, .export-users-cards-wrapper .search_wrapper_box_select {
  width: 50%;
  padding: 10px;
  margin: 0 10px 0 0 !important;
  background-position: 4px center;
  background-repeat: no-repeat;
  border: 1px #aeaeae solid;
  border-radius: 10px;
  margin: 10px;
}
.export-users-cards-wrapper .search_wrapper_box_select {
  border: 0;
  margin: 0 auto !important;
  padding: 0;
}
.export-users-cards-wrapper .filter_search {
  padding: 20px;
  margin: 10px;
  border: 1px #aeaeae solid;
  border-radius: 10px;
  width: 80%;
  margin: 0 auto;
}
.export-users-cards-wrapper .big_label {
  color: #999;
  font-size: 14px;
}
.export-users-cards-wrapper .section_break, .export-users-cards-wrapper .empty_card {
  display: none;
}
.export-users-cards-wrapper .disabled {
  background-color: #ddd;
}
.export-users-cards-wrapper .guardian {
  /*background-color: bisque;*/
}
@media print {
  .export-users-cards-wrapper div.account_info {
    page-break-inside: avoid;
  }
  .export-users-cards-wrapper a {
    display: none;
  }
  .export-users-cards-wrapper h1 {
    page-break-before: auto;
  }
}
.export-users-cards-wrapper h3 {
  margin: 2px !important;
}
.export-users-cards-wrapper .account_info {
  line-height: 0.7cm;
  height: 225px !important;
  border: 2px #aeaeae dotted;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  margin: 10px 10px;
  padding: 15px;
  padding-bottom: 40px;
  background-color: #fafafa;
  page-break-after: auto;
  position: relative;
  line-height: 1.4em;
}
.export-users-cards-wrapper .account_info .export_logo {
  left: 3px;
  bottom: 3px;
  position: relative;
  float: left;
  margin-top: 10px;
}
.export-users-cards-wrapper .account_info .export_user_info {
  width: 100%;
}
.export-users-cards-wrapper body {
  font-family: Tahoma;
  font-size: 12px;
  line-height: 30px;
}
.export-users-cards-wrapper .notice {
  margin: 0 auto;
  text-align: center;
  width: 400px;
}
.export-users-cards-wrapper .notice a {
  background-color: orange;
  padding: 10px;
  color: black;
  border-radius: 10px;
  text-decoration: none;
  margin: 10px;
  display: block;
}
.export-users-cards-wrapper .notice a:hover {
  background-color: #000;
  color: orange;
}
.export-users-cards-wrapper .logo img {
  max-width: 280px;
  max-height: 40px !important;
  display: block;
  float: none;
  margin: 0 auto;
}
.export-users-cards-wrapper div.two_cards_container {
  /*width: 680px; */
  margin: 0 auto;
}
.export-users-cards-wrapper img.export_logo {
  max-width: 95px !important;
  height: auto;
}
@media print {
  .export-users-cards-wrapper {
    /*@page { margin: 1in; }*/
  }
  .export-users-cards-wrapper .no-print, .export-users-cards-wrapper .no-print * {
    display: none !important;
  }
}
.export-users-cards-wrapper h4 {
  margin: 3px 0;
}
.export-users-cards-wrapper input[type=checkbox], .export-users-cards-wrapper input[type=radio] {
  position: static;
}
.export-users-cards-wrapper .account-info-wrapper {
  min-width: 280px;
}
.export-users-cards-wrapper .checkbox-filter {
  display: inline-block;
  margin: 5px;
}
.export-users-cards-wrapper .checkbox-filter input {
  margin-left: 3px;
}
@media only screen and (max-width: 1050px) {
  .export-users-cards-wrapper .checkbox-filter {
    display: block;
    width: 100%;
    text-align: right;
  }
  .export-users-cards-wrapper .search_box, .export-users-cards-wrapper .filter_search {
    width: 100%;
  }
}
.export-users-cards-wrapper.export-ids-cards-wrapper .logo img {
  max-height: unset !important;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #eee;
  object-fit: cover;
}
.export-users-cards-wrapper.export-ids-cards-wrapper .account_info {
  height: unset !important;
  min-height: 324px;
  padding: 10px 0 !important;
  border: 1px solid #eee;
  max-width: 230px;
  margin: 10px auto;
}
.export-users-cards-wrapper.export-ids-cards-wrapper .account_info h3 {
  font-size: 13px;
}
.export-users-cards-wrapper.export-ids-cards-wrapper .table > tbody > tr > td {
  border-top: unset !important;
  padding: 5px 0;
  font-size: 13px;
}
.export-users-cards-wrapper.export-ids-cards-wrapper .table > tbody > tr > td:first-child {
  padding: 4px 6px;
}
.export-users-cards-wrapper.export-ids-cards-wrapper .table > tbody > tr > td:last-child {
  font-size: 12px;
}
.export-users-cards-wrapper.export-ids-cards-wrapper .two_cards_container {
  display: flex;
  flex-wrap: wrap;
}
.export-users-cards-wrapper.export-ids-cards-wrapper .filter_search {
  border: 0;
}
.export-users-cards-wrapper.export-ids-cards-wrapper .big_label {
  display: block;
  margin: 10px 0px;
}
.export-users-cards-wrapper.export-ids-cards-wrapper .account-info-wrapper {
  width: 25%;
}
@media print {
  .export-users-cards-wrapper.export-ids-cards-wrapper .account-info-wrapper {
    page-break-inside: avoid !important;
  }
}
.export-users-cards-wrapper.export-ids-cards-wrapper .search_box {
  border-radius: 25px;
}
.export-users-cards-wrapper.export-ids-cards-wrapper .school_logo img {
  max-width: 90%;
  /*max-height: 40px;*/
  margin: 0 auto;
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  opacity: 0.3;
  max-height: 60px;
  object-fit: contain;
}
.export-users-cards-wrapper.export-staff-ids-cards-wrapper .account_info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px !important;
}
.export-users-cards-wrapper.export-staff-ids-cards-wrapper .account_info h3 {
  white-space: unset;
}
.export-users-cards-wrapper .account_info_header .full_name_, .export-users-cards-wrapper .account_info_header .level_title_ {
  text-align: center;
}
.export-users-cards-wrapper .horizontal_view .account-info-wrapper {
  width: 33%;
  min-width: 350px;
}
.export-users-cards-wrapper .horizontal_view .account-info-wrapper .account_info {
  width: 324px;
  max-width: unset;
  height: 205px !important;
  min-height: unset;
}
.export-users-cards-wrapper .horizontal_view .account-info-wrapper .account_info .account_info_header {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 0 6px;
}
.export-users-cards-wrapper .horizontal_view .account-info-wrapper .account_info .account_info_header .full_name_, .export-users-cards-wrapper .horizontal_view .account-info-wrapper .account_info .account_info_header .level_title_ {
  text-align: unset;
}
.export-users-cards-wrapper .horizontal_view .account-info-wrapper .account_info .table > tbody > tr > td:first-child {
  padding-right: 8px;
}
.export-users-cards-wrapper .horizontal_view .account-info-wrapper .account_info .table > tbody > tr > td:last-child {
  padding-left: 8px;
  text-align: left;
}
.export-users-cards-wrapper .horizontal_view .account-info-wrapper .account_info .school_logo img {
  opacity: 0.1;
  max-height: 90px;
  object-fit: contain;
}
.export-users-cards-wrapper .horizontal_view .account-info-wrapper .logo img {
  width: 45px;
  height: 45px;
}
@media print {
  .export-users-cards-wrapper .two_cards_container .account-info-wrapper:nth-of-type(4n +0):before {
    clear: both !important;
    display: block !important;
    position: relative !important;
    float: none !important;
    content: " ";
    width: 100% !important;
    page-break-after: always !important;
    page-break-before: always !important;
  }
  .export-users-cards-wrapper .two_cards_container {
    display: block !important;
  }
  .export-users-cards-wrapper .account-info-wrapper {
    display: inline-block !important;
  }
}

.carded {
  position: relative;
  display: block;
  margin-bottom: 20px;
  background-color: #ddd;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 !important;
}

.carded-block {
  clear: both;
  float: none;
  padding: 15px;
}

.carded-title {
  margin-top: 0;
  margin-bottom: 10px;
}

.carded-subtitle {
  margin-top: -10px;
  margin-bottom: 0;
}

.carded-text:last-child {
  margin-bottom: 0;
}

.carded-link:hover {
  text-decoration: none;
}
.carded-link + .carded-link {
  margin-left: 15px;
}

.carded > .list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.carded > .list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.carded-header {
  clear: both;
  float: none;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  margin: 0 !important;
}
.carded-header:first-child {
  border-radius: 4px 4px 0 0;
}

.carded-footer {
  clear: both;
  float: none;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
}
.carded-footer:last-child {
  border-radius: 0 0 4px 4px;
}

.carded-header-tabs {
  margin-right: -5px;
  margin-bottom: -10px;
  margin-left: -5px;
  border-bottom: 0;
}

.carded-header-pills {
  margin-right: -5px;
  margin-left: -5px;
}

.carded-primary {
  background-color: #337ab7;
  border-color: #337ab7;
}
.carded-primary .carded-header,
.carded-primary .carded-footer {
  background-color: transparent;
}

.carded-success {
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.carded-success .carded-header,
.carded-success .carded-footer {
  background-color: transparent;
}

.carded-info {
  background-color: #5bc0de;
  border-color: #5bc0de;
}
.carded-info .carded-header,
.carded-info .carded-footer {
  background-color: transparent;
}

.carded-warning {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}
.carded-warning .carded-header,
.carded-warning .carded-footer {
  background-color: transparent;
}

.carded-danger {
  background-color: #d9534f;
  border-color: #d9534f;
}
.carded-danger .carded-header,
.carded-danger .carded-footer {
  background-color: transparent;
}

.carded-outline-primary {
  background-color: transparent;
  border-color: #337ab7;
}

.carded-outline-secondary {
  background-color: transparent;
  border-color: #ccc;
}

.carded-outline-info {
  background-color: transparent;
  border-color: #5bc0de;
}

.carded-outline-success {
  background-color: transparent;
  border-color: #5cb85c;
}

.carded-outline-warning {
  background-color: transparent;
  border-color: #f0ad4e;
}

.carded-outline-danger {
  background-color: transparent;
  border-color: #d9534f;
}

.carded-inverse .carded-header,
.carded-inverse .carded-footer {
  border-color: rgba(255, 255, 255, 0.2);
}
.carded-inverse .carded-header,
.carded-inverse .carded-footer,
.carded-inverse .carded-title,
.carded-inverse .carded-blockquote {
  color: #fff;
}
.carded-inverse .carded-link,
.carded-inverse .carded-text,
.carded-inverse .carded-subtitle,
.carded-inverse .carded-blockquote .blockquote-footer {
  color: rgba(255, 255, 255, 0.65);
}
.carded-inverse .carded-link:hover, .carded-inverse .carded-link:focus {
  color: #fff;
}

.carded-blockquote {
  padding: 0;
  margin-bottom: 0;
  border-left: 0;
}

.carded-img {
  border-radius: 0.25em;
}

.carded-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px;
}

.carded-img-top {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  width: 100%;
  object-fit: cover;
}

.carded-img-bottom {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  width: 100%;
  object-fit: cover;
}

.all_atl_popup {
  /* Medium Screens */
  /* Small Screens */
}
.all_atl_popup .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 15px;
  overflow: auto;
  height: 250px;
  padding: 30px;
  width: 870px;
  background-color: #fff;
}
.all_atl_popup .grid-childs {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.07);
  padding: 20px 15px;
  font-size: 15px;
  border-radius: 7px;
  cursor: pointer;
  height: 70px;
  border-top: 3px solid var(--main-color);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  text-align: left;
  margin-bottom: 20px;
  background-color: #fff;
  color: var(--main-color);
}
.all_atl_popup .atl_type_title {
  padding-left: 30px;
  position: relative;
}
.all_atl_popup .remoteService {
  color: white;
  background-color: #e5301c;
  padding: 3px;
  border-radius: 5px;
  transform: translateY(-50%);
  position: absolute;
  left: 0;
  top: 50%;
}
@media (max-width: 992px) {
  .all_atl_popup .grid-container {
    margin: 10px;
    font-size: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 5px;
    overflow: auto;
    height: 250px;
    padding: 15px;
    width: 535px;
  }
}
@media (max-width: 768px) {
  .all_atl_popup .grid-container {
    margin: 2px;
    font-size: 10px;
    display: grid;
    grid-template-columns: 2fr;
    grid-gap: 5px;
    overflow: auto;
    height: 250px;
    padding: 5px;
    width: 350px;
  }
  .all_atl_popup .grid-childs {
    margin-bottom: 10px;
  }
  .all_atl_popup .remoteService {
    color: white;
    background-color: #e5301c;
    padding: 3px;
    border-radius: 5px;
    transform: translateY(-50%);
    position: absolute;
    left: 0;
    top: 50%;
  }
}

/* ****************  Index Page ********  */
.equations_report_cards {
  /* Float four columns side by side */
  /* Remove extra left and right margins, due to padding */
  /* Clear floats after the columns */
  /* Responsive columns */
  /* Style the counter cards */
  /* **************** End Index Page********  */
  /* **************** VIEW Page ********  */
  /* **************** End VIEW Page ********  */
}
.equations_report_cards th.buttons {
  display: none;
}
.equations_report_cards td.buttons {
  border: none !important;
  padding: 0px !important;
  z-index: -1;
  /* transform: translateX(-2%); */
  transition: transform 0.5s ease 0s, z-index 0.1s ease 0s;
}
.equations_report_cards tr:hover td.buttons {
  transform: translateX(0%);
  z-index: 1;
  transition: transform 0.5s ease 0s, z-index 0.01s ease 0.5s;
}
.equations_report_cards .buttons ul {
  margin: 0;
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
}
.equations_report_cards .buttons ul li {
  display: block;
  min-height: 100%;
  text-align: center;
  cursor: pointer;
}
.equations_report_cards .buttons a {
  border-radius: 2px;
  display: block;
  color: var(--main-color);
  font-size: 12px;
  line-height: 98%;
  /* min-width: 5em; */
  text-decoration: none !important;
  transition: background 0.3s ease 0s;
  padding: 5px 3px;
}
.equations_report_cards .buttons i {
  display: block;
  font-size: 1.5em;
}
.equations_report_cards .buttons span {
  font-family: sans-serif;
  font-size: 0.625em;
  text-transform: uppercase;
}
.equations_report_cards .buttons ul li:hover a {
  background: var(--main-color);
  color: white;
  z-index: 1;
}
.equations_report_cards .column {
  display: inline-block;
  width: 33%;
  padding: 0 10px;
}
.equations_report_cards .row {
  margin: 0 -5px;
}
.equations_report_cards .row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 600px) {
  .equations_report_cards .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.equations_report_cards .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.07);
  padding: 20px 15px;
  border-radius: 7px;
  text-align: center;
  background-color: #fff;
  margin-bottom: 20px;
}
.equations_report_cards .jumbotron .h1, .equations_report_cards .jumbotron h1 {
  font-size: 38px;
  text-align: center;
}
.equations_report_cards .card-view {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.07);
  transition: 0.3s;
  width: 100%;
  border-radius: 5px;
  border-top: 3px solid var(--main-color);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.equations_report_cards img {
  border-radius: 5px 5px 0 0;
}
.equations_report_cards .card-view-container {
  padding: 2px 16px;
}
.equations_report_cards .card-view-info {
  background-color: #eee;
  /* border-left: 6px solid #2196F3; */
  margin-bottom: 15px;
  padding: 4px 12px;
  border-radius: 5px 5px 0 0;
}
.equations_report_cards .card-view-body {
  padding: 0.75rem 1.25rem 1.25rem;
}
.equations_report_cards .card-view-footer {
  padding: 0.75rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.equations_report_cards .card-view-title {
  font-weight: bold;
  font-size: 28px;
  padding: 10px;
}
.equations_report_cards .card-view-text {
  line-height: 2;
  font-size: 18px;
  padding: 30px;
}

.quran_modal .modal-content {
  border-radius: 7px;
  overflow: hidden;
}
.quran_modal .modal-footer, .quran_modal .modal-header {
  background: #fff;
}
.quran_modal .modal-dialog.modal-lg {
  min-width: 90%;
}

.quran-menu {
  position: relative;
  background: #f3f3f3;
  border-radius: 7px;
  padding: 15px;
  margin-bottom: 15px;
}
.quran-menu.with-bg:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  background: url(/img/quran_menu_bg.png);
  width: 60%;
  height: 100%;
  background-position-x: right;
  background-size: cover;
  opacity: 0.5;
}
.quran-menu .quran-menu-section:not(:last-child) {
  border-bottom: 1px solid #ddd;
}
.quran-menu .quran-menu-row {
  display: grid;
  grid-template-columns: 50% 50%;
}
.quran-menu .quran-menu-row p {
  color: #777;
}
.quran-menu .quran-menu-row h5 {
  margin: 0;
}
.quran-menu.form-menu .quran-menu-row {
  grid-template-columns: 100%;
}
.quran-menu.form-menu .submit-form-menu {
  width: 100%;
}

.quran-page-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.quran-page {
  padding: 40px 70px 70px;
  position: relative;
  width: 100%;
  min-height: 462px;
  background: #f3f3f3;
  border-radius: 7px;
  border: 9px double #fff;
  height: 100%;
}
.quran-page .aya {
  font-size: 18px;
  line-height: 3;
}
.quran-page .aya.bism {
  width: 100%;
  text-align: center;
  padding: 20px 10px;
}
.quran-page .sura-name {
  margin: 15px 0;
  text-align: center;
}
.quran-page .sura-name span {
  font-size: 18px;
  display: inline-flex;
  margin: 0 auto;
  position: relative;
  width: 300px;
  height: 64px;
  justify-content: center;
  align-items: center;
}
.quran-page .sura-name span:before {
  content: "";
  position: absolute;
  background: url(/img/sura_name_border.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
@media screen and (max-width: 558px) {
  .quran-page .sura-name span {
    width: auto;
  }
  .quran-page .sura-name span:before {
    display: none;
  }
}
.quran-page .quran-border-top {
  width: 100%;
  left: 0;
  top: 0;
  height: 30px;
  background: url(/img/quran_frame_2.png);
}
.quran-page .quran-border-bottom {
  width: 100%;
  left: 0;
  bottom: 0;
  height: 30px;
  background: url(/img/quran_frame_2.png);
  transform: rotate(180deg);
}
.quran-page .quran-border-right {
  width: 30px;
  right: 0;
  top: 30px;
  height: calc(100% - 60px);
  background: url(/img/quran_frame_vertical_2.png);
}
.quran-page .quran-border-left {
  width: 30px;
  left: 0;
  top: 30px;
  height: calc(100% - 60px);
  background: url(/img/quran_frame_vertical_2.png);
  transform: rotate(180deg);
}
.quran-page .quran-border {
  position: absolute;
  background-size: contain;
}
.quran-page .quran-page-number {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 5px;
  min-width: 200px;
}
.quran-page .quran-page-number > span {
  padding: 6px 20px;
}
@media screen and (max-width: 558px) {
  .quran-page .quran-page-number > span {
    padding: 6px 5px;
  }
}
.quran-page .quran-page-number > span i {
  margin: 0 5px;
  color: var(--main-color);
}
.quran-page .quran-page-number.ara .prev-page i, .quran-page .quran-page-number.ara .next-page i {
  transform: rotate(180deg);
}
@media screen and (max-width: 558px) {
  .quran-page {
    padding: 40px 20px 70px;
  }
  .quran-page .quran-border-top, .quran-page .quran-border-bottom {
    height: 13px;
  }
  .quran-page .quran-border-right, .quran-page .quran-border-left {
    width: 13px;
    top: 13px;
    height: calc(100% - 26px);
  }
}

.quran_main_content table {
  border: 1px solid #eee;
}

.unit-plan-document .unit-plan-title {
  text-align: center;
  margin: max(2vw, 20px) 10px;
  font-size: max(2vw, 18px);
}
.unit-plan-document .unit-plan-grid {
  display: flex;
  flex-wrap: wrap;
}
.unit-plan-document .unit-plan-grid ul {
  list-style: none;
  display: grid;
  grid-template-columns: 40% 60%;
  margin-bottom: 0;
}
.unit-plan-document .unit-plan-grid ul li {
  margin: 1px;
  background: #eee;
  min-height: 70px;
  padding: 10px;
  box-sizing: content-box;
}
.unit-plan-document .unit-plan-grid .right {
  min-width: 300px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  flex: 1;
}
.unit-plan-document .unit-plan-grid .left {
  width: 30%;
  display: grid;
  min-width: 300px;
  grid-template-rows: 1fr 1fr;
  flex: 1;
}
.unit-plan-document .unit-plan-grid.designing-and-implementing-grid {
  flex-direction: column;
  margin-bottom: 15px;
}
.unit-plan-document .unit-plan-grid.designing-and-implementing-grid .right, .unit-plan-document .unit-plan-grid.designing-and-implementing-grid .left {
  width: 100%;
  grid-template-rows: unset;
}
.unit-plan-document .unit-plan-grid.designing-and-implementing-grid .right ul {
  grid-template-columns: 1fr 2fr 1fr 1fr;
}
.unit-plan-document .unit-plan-grid.designing-and-implementing-grid .left ul {
  grid-template-columns: 1fr 4fr;
}
.unit-plan-document .unit-cards-wrapper {
  margin-top: 15px;
}
.unit-plan-document .unit-card {
  border: 2px solid #a5d4fb;
}
.unit-plan-document .unit-card.card-block {
  margin-bottom: 15px;
}
.unit-plan-document .unit-card .unit-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  margin-left: 10px;
  background: url(/img/unit_plan_icons.png);
  background-size: cover;
}
.unit-plan-document .unit-card .unit-card-header {
  background-color: #a5d4fb;
  color: #191919;
  padding: 10px;
}
.unit-plan-document .unit-card .unit-card-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
}
.unit-plan-document .unit-card .unit-card-body {
  min-height: 50px;
  padding: 10px;
}
.unit-plan-document .unit-cards-gallery-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.unit-plan-document .unit-cards-gallery-wrapper .unit-card {
  width: calc(33.3% - 2px);
  min-width: 300px;
  flex: 1;
  margin: 0 1px;
}
.unit-plan-document .unit-cards-gallery-wrapper .unit-card .unit-card-body {
  min-height: 150px;
}
.unit-plan-document .prompts-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(4, calc(25% - 10px));
}
@media screen and (max-width: 1550px) {
  .unit-plan-document .prompts-cards-wrapper {
    grid-template-columns: repeat(3, calc(33.3% - 10px));
  }
}
@media screen and (max-width: 1250px) {
  .unit-plan-document .prompts-cards-wrapper {
    grid-template-columns: repeat(2, calc(50% - 10px));
  }
}
@media screen and (max-width: 950px) {
  .unit-plan-document .prompts-cards-wrapper {
    grid-template-columns: 100%;
  }
}
.unit-plan-document .prompts-cards-wrapper.reflecting-prompts-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  grid: none;
}
.unit-plan-document .prompts-cards-wrapper.reflecting-prompts-cards-wrapper .card-block-prompts {
  flex: 1;
  width: 50%;
  min-width: 300px;
}
.unit-plan-document .prompts-cards-wrapper .card-block-prompts {
  margin: 5px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 950px) {
  .unit-plan-document .prompts-cards-wrapper .card-block-prompts {
    margin: 5px 0;
  }
}
.unit-plan-document .prompts-cards-wrapper .unit-card-body {
  background: #a5d4fb;
  color: #191919;
  flex: 1;
  padding: 10px;
}
.unit-plan-document .prompts-cards-wrapper .unit-card-body ul {
  margin-right: 15px;
}
.unit-plan-document .unit-plan-cards-orange .unit-card-header, .unit-plan-document .unit-plan-cards-orange .prompts-cards-wrapper .unit-card-body {
  background: #fac680;
}
.unit-plan-document .unit-plan-cards-orange .unit-card {
  border-color: #fac680;
}
.unit-plan-document .unit-plan-cards-green .unit-card-header, .unit-plan-document .unit-plan-cards-green .prompts-cards-wrapper .unit-card-body {
  background: #fac680;
}
.unit-plan-document .unit-plan-cards-green .unit-card {
  border-color: #fac680;
}

.unit_plan_calnder_wrapper {
  overflow-x: auto;
}

table#unit_plan_calnder {
  position: relative;
}
table#unit_plan_calnder thead th {
  padding: 5px 10px;
}
table#unit_plan_calnder tbody td {
  min-width: 115px;
  height: 100px;
}
table#unit_plan_calnder tbody td:not(.program_title) {
  padding: 8px 0;
}
table#unit_plan_calnder .program_card {
  padding: 5px 10px;
  border-radius: 5px;
  background: rgba(var(--main-color-rgb), 0.15);
  transition: ease-in-out 0.2s;
}
table#unit_plan_calnder .program_card .card-content-box {
  display: none;
}
table#unit_plan_calnder .program_card .central_idea {
  display: flex;
  align-items: center;
  font-size: 12px !important;
  margin: 5px 0;
}
table#unit_plan_calnder .program_card .central_idea p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table#unit_plan_calnder .program_card:hover {
  min-width: 115px;
  background: var(--main-color);
  color: #fff;
  z-index: 1;
}
table#unit_plan_calnder .program_card:hover .central_idea p {
  overflow: visible;
  white-space: unset;
}
table#unit_plan_calnder .program_card:hover .btn-primary, table#unit_plan_calnder .program_card:hover .btn-primary:focus {
  background: #eee !important;
  color: var(--main-color);
}
table#unit_plan_calnder .program_card:hover .card-content-box {
  display: block;
}
table#unit_plan_calnder .program_card a {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.program_of_inquiry_tr_page table {
  border: 1px solid #eee;
}
.program_of_inquiry_tr_page table th {
  text-align: center;
  color: #191919;
}
.program_of_inquiry_tr_page table tbody tr td:not(:first-child) {
  border-right: 1px solid #eee;
}
.program_of_inquiry_tr_page #selectTransdisplinary {
  margin-top: 10px;
  margin-right: 10px;
}
.program_of_inquiry_tr_page ul {
  margin-right: 10px;
}
.program_of_inquiry_tr_page thead th {
  padding: 20px !important;
}
.program_of_inquiry_tr_page #transcript_id_11 thead th {
  background: #f6b26a;
}
.program_of_inquiry_tr_page #transcript_id_11 tbody th {
  background: #fce5cd;
}
.program_of_inquiry_tr_page #transcript_id_9 thead th {
  background: #8e7cc3;
}
.program_of_inquiry_tr_page #transcript_id_9 tbody th {
  background: #d9d3e9;
}
.program_of_inquiry_tr_page #transcript_id_10 thead th {
  background: #76a5ae;
}
.program_of_inquiry_tr_page #transcript_id_10 tbody th {
  background: #d1dfe2;
}
.program_of_inquiry_tr_page #transcript_id_12 thead th {
  background: #ffd866;
}
.program_of_inquiry_tr_page #transcript_id_12 tbody th {
  background: #fff1cc;
}
.program_of_inquiry_tr_page #transcript_id_13 thead th {
  background: #d5a5bd;
}
.program_of_inquiry_tr_page #transcript_id_13 tbody th {
  background: #ead1dc;
}
.program_of_inquiry_tr_page #transcript_id_14 thead th {
  background: #93c37d;
}
.program_of_inquiry_tr_page #transcript_id_14 tbody th {
  background: #d9e9d4;
}

.calendarEvents .fc-agendaWeek-view .fc-title, .calendarEvents .fc-basicWeek-view .fc-title, .calendarEvents .fc-agendaDay-view .fc-title, .calendarEvents .fc-month-view .fc-title {
  word-break: break-word;
  white-space: break-spaces;
}
.calendarEvents .fc-event {
  border: 0;
  border-right: 3px solid var(--main-color);
  padding: 5px 3px;
  background-color: rgba(var(--main-color-rgb), 0.8);
  color: #fff;
}
.calendarEvents .fc-event .fc-event-dot {
  background-color: var(--main-color);
}
.calendarEvents .fc-event.Vcrs {
  background-color: rgba(143, 175, 208, 0.8);
  border-color: #8FAFD0;
}
.calendarEvents .fc-event.Activities {
  background-color: rgba(96, 158, 222, 0.8);
  border-color: #609ede;
}
.calendarEvents .fc-event.Assessments {
  background-color: rgba(114, 109, 168, 0.8);
  border-color: #726DA8;
}
.calendarEvents .fc-event.Exam {
  background-color: rgba(102, 87, 128, 0.8);
  border-color: #665780;
}
.calendarEvents .fc-event.Appointments {
  background-color: rgba(160, 210, 219, 0.8);
  border-color: #A0D2DB;
}
.calendarEvents .fc-event.Homework {
  background-color: rgba(219, 160, 173, 0.8);
  border-color: #dba0ad;
}
.calendarEvents .fc-event.Evaluations {
  background-color: rgba(216, 219, 160, 0.8);
  border-color: #d8dba0;
}
.calendarEvents .fc-event.ReportCards {
  background-color: rgba(200, 89, 160, 0.8);
  border-color: #c859a0;
}
.calendarEvents .fc-event.Tasks {
  background-color: rgba(33, 150, 243, 0.8);
  border-color: #2196F3;
}
.calendarEvents .fc-event.ClassVist {
  background-color: rgba(76, 175, 80, 0.8);
  border-color: #4CAF50;
}
.calendarEvents .fc-event.CentralEvent {
  background-color: rgba(243, 82, 33, 0.8);
  border-color: #f35221cc;
}
.calendarEvents .fc-event .fc-content {
  border: 0 !important;
  padding: 0;
  background-color: transparent !important;
  color: unset !important;
  text-align: right;
}
.calendarEvents .fc-basicWeek-view .fc-.fc-content {
  margin-right: 0 !important;
}
.calendarEvents .fc-basicWeek-view .fc-content {
  display: flex;
  flex-direction: column-reverse;
}
.calendarEvents .fc-basicWeek-view .fc-title {
  word-break: break-word;
  white-space: break-spaces;
}
.calendarEvents .fc-basicWeek-view .fc-time {
  display: block;
}
.calendarEvents .fc-month-view .fc-content {
  background-color: var(--main-color);
  color: #fff;
  padding: 0;
}
.calendarEvents .fc-listWeek-view .fc-event-dot {
  background-color: var(--main-color);
}
.calendarEvents .fc-listWeek-view .Vcrs .fc-event-dot {
  background-color: #8FAFD0;
}
.calendarEvents .fc-listWeek-view .Activities .fc-event-dot {
  background-color: #8FAFD0;
}
.calendarEvents .fc-listWeek-view .Assessments .fc-event-dot {
  background-color: #726DA8;
}
.calendarEvents .fc-listWeek-view .Exam .fc-event-dot {
  background-color: #665780;
}
.calendarEvents .fc-listWeek-view .Appointments .fc-event-dot {
  background-color: #A0D2DB;
}
.calendarEvents .fc-listWeek-view .Homework .fc-event-dot {
  background-color: #dba0ad;
}
.calendarEvents .fc-listWeek-view .Evaluations .fc-event-dot {
  background-color: #d8dba0;
}
.calendarEvents .fc-event.allDay {
  height: auto;
  height: fit-content;
}

.labels-of-colors {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.labels-of-colors > div {
  margin-right: 10px;
}
.labels-of-colors .label-color {
  margin: 2px;
  width: 25px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
}

.bus-trips-wrapper {
  padding: 0 15px 5px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.bus-trips-wrapper .trip-box {
  width: calc(100% - 12px);
  max-width: 500px;
  border-radius: 7px 10px;
  display: inline-block;
  padding: 15px 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  background: #fff;
  text-align: center;
  position: relative;
  margin-bottom: 12px;
  min-height: 210px;
}
.bus-trips-wrapper .trip-box:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("/img/abstract_vector_bg.png");
  background-size: 100%;
  opacity: 0.4;
  border-radius: 7px;
  opacity: 0.09;
  filter: grayscale(1);
}
.bus-trips-wrapper .trip-box .bus-icon {
  font-size: 24px;
  background: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  margin: 5px auto 10px;
}
.bus-trips-wrapper .trip-box .trip-title {
  font-size: 16px;
}
.bus-trips-wrapper .trip-box.trip-warning .bus-icon {
  background: linear-gradient(180deg, #0069D3, #00CDF4);
}
.bus-trips-wrapper .trip-box.trip-warning .date-join-section .btn {
  color: #0069D3 !important;
  border: 1px solid #0069D3 !important;
}
.bus-trips-wrapper .trip-box.trip-warning:before {
  background: url(/img/bus_child_vector.png) no-repeat;
  background-size: 100%;
  background-position: center;
}
.bus-trips-wrapper .trip-box.trip-primary .bus-icon {
  background: linear-gradient(180deg, #f7ca0d, #ffbe7e);
}
.bus-trips-wrapper .trip-box.trip-primary .date-join-section .btn {
  color: #f7ca0d !important;
  border: 1px solid #f7ca0d !important;
}
.bus-trips-wrapper .trip-box.trip-primary:before {
  background: url(/img/memship_2.png) no-repeat;
  background-size: 150%;
  background-position: center;
}
.bus-trips-wrapper .trip-box.trip-default .bus-icon {
  background: linear-gradient(180deg, #A5A5A5, #D5D5D5);
}
.bus-trips-wrapper .trip-box.trip-default .date-join-section .btn {
  color: #A5A5A5 !important;
  border: 1px solid #A5A5A5 !important;
}
.bus-trips-wrapper .trip-box.trip-default:before {
  background: url(/img/memship_2.png) no-repeat;
  background-size: 150%;
  background-position: right bottom;
}
.bus-trips-wrapper .trip-box.trip-success .bus-icon {
  background: linear-gradient(180deg, #5DCB34, #00E2D0);
}
.bus-trips-wrapper .trip-box.trip-success .date-join-section .btn {
  color: #5DCB34 !important;
  border: 1px solid #5DCB34 !important;
}
.bus-trips-wrapper .trip-box.trip-success:before {
  background: url(/img/memship_2.png) no-repeat;
  background-size: 150%;
  background-position: left top;
}

.bus_managment_students_list_wrapper .user_box {
  background: #fafafa;
  padding: 10px;
  border-radius: 7px;
  margin-bottom: 10px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
}
.bus_managment_students_list_wrapper .user_box .user_info, .bus_managment_students_list_wrapper .user_box .user_actions_wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 750px) {
  .bus_managment_students_list_wrapper .user_box .user_info, .bus_managment_students_list_wrapper .user_box .user_actions_wrapper {
    flex-basis: 100%;
  }
}
.bus_managment_students_list_wrapper .user_box .user_info {
  margin-left: 10px;
  min-width: 50%;
}
.bus_managment_students_list_wrapper .user_box .user_info .status {
  margin-right: 10px;
  color: var(--main-color);
}
.bus_managment_students_list_wrapper .user_box .user_info .level-title {
  color: #aeaeae;
  flex-basis: 100%;
  margin-right: 50px;
}
.bus_managment_students_list_wrapper .user_box .select {
  width: 200px;
}
.bus_managment_students_list_wrapper .user_box .select .control-label {
  display: none;
}
.bus_managment_students_list_wrapper .user_box .user_img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 10px;
}
.bus_managment_students_list_wrapper .user_box .name {
  display: flex;
  align-items: center;
}
.bus_managment_students_list_wrapper .user_box .user_actions button {
  margin-left: 10px;
  padding: 4px 20px;
  position: relative;
}
@media screen and (max-width: 750px) {
  .bus_managment_students_list_wrapper .user_box .user_actions button {
    margin-top: 10px;
  }
}
.bus_managment_students_list_wrapper .user_box .user_actions button:before {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.bus_managment_students_list_wrapper .user_box .user_actions button.OnBoard:before {
  background: #F7CA0D;
}
.bus_managment_students_list_wrapper .user_box .user_actions button.OnBoard.active {
  background: #F7CA0D;
  border-color: #F7CA0D;
  color: #fff;
}
.bus_managment_students_list_wrapper .user_box .user_actions button.absent:before {
  background: #e5301c;
}
.bus_managment_students_list_wrapper .user_box .user_actions button.absent.active {
  background: #e5301c;
  border-color: #e5301c;
  color: #fff;
}
.bus_managment_students_list_wrapper .user_box .user_actions button.arrived:before {
  background: #66BB6A;
}
.bus_managment_students_list_wrapper .user_box .user_actions button.arrived.active {
  background: #66BB6A;
  border-color: #66BB6A;
  color: #fff;
}
@media screen and (max-width: 1225px) {
  .bus_managment_students_list_wrapper .user_box .user_actions_wrapper {
    margin-right: 50px;
  }
}
@media screen and (max-width: 600px) {
  .bus_managment_students_list_wrapper .user_box .user_actions_wrapper .comment_ {
    margin-top: 10px;
  }
  .bus_managment_students_list_wrapper .user_box .user_actions_wrapper .comment_ .select {
    padding: 0;
  }
}

.trip-title {
  margin: 10px 0 25px;
}

.no_data_box .no_data_img {
  width: 70%;
  max-width: 500px;
}
.no_data_box .no_data_img path[fill="#b0bec5"], .no_data_box .no_data_img circle[fill="#b0bec5"] {
  fill: var(--main-color);
}

#exam_video {
  width: 200px;
  height: 200px;
  z-index: 9999999999;
  position: fixed;
  bottom: 16px;
  left: 16px;
}

#exam_screen_video {
  width: 200px;
  height: 200px;
  display: none;
}

#profile_video, .face-picture {
  margin: 0 auto 10px;
  width: 100%;
  display: block;
}

.verification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999999999;
  color: #FFF;
  text-align: center;
  font-size: 3em;
  line-height: 100vh;
}

.verification-overlay p {
  line-height: 2em;
  padding-top: 50px;
  cursor: pointer;
}

.face-pic-confirm, #save_pic, .delete-faces-btn, #take_anouther_image {
  display: none;
}

.face-pic-confirm p {
  padding: 10px 20px;
  font-weight: bold;
  font-size: 15px;
}

.face-picture-wrapper {
  position: relative;
}

.face-rectangle {
  display: none;
  border: 2px solid var(--main-color);
  position: absolute;
}

.add-face-btn-style.btn:focus, .add-face-btn-style.btn:hover, .delete-faces-btn:hover, .delete-faces-btn:focus {
  background: #fff !important;
  color: var(--main-color) !important;
  border: 1px solid var(--main-color) !important;
}

a.add-face-btn-style {
  border: 0;
  padding: 10px 20px;
  transition: all ease-in-out 0.4s;
  -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
  margin: 10px;
  border-radius: 25px;
}

#take_pic {
  background: var(--main-color);
  color: #fff;
}

.close-modal-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.FaceVerifyBox, .moreThanOneFace, .faceNotClear {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  text-align: center;
  display: none;
  z-index: 1111;
}

.FaceVerifyBox h2, .moreThanOneFace h2, .faceNotClear h2 {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.add_bulk_questions_table_wrapper {
  width: 100%;
  overflow-x: auto;
}
.add_bulk_questions_table_wrapper .table thead {
  border-color: #ccc;
}
.add_bulk_questions_table_wrapper .table tbody .editable-cell input {
  border-radius: 6px;
  min-height: 40px;
}
.add_bulk_questions_table_wrapper .table tbody .editable-cell input.mark_field {
  min-width: 50px;
}
.add_bulk_questions_table_wrapper .table tbody .editable-cell input:not(.mark_field) {
  min-width: 60px;
}
.add_bulk_questions_table_wrapper .table tbody .editable-cell input.input-ya-man {
  padding: 0;
  margin: 0;
  background-color: #fff !important;
  border: 0.5px solid #d5d5d5 !important;
}
.add_bulk_questions_table_wrapper .table tbody .editable-cell.option {
  width: 100px;
  max-width: 100px;
}
.add_bulk_questions_table_wrapper .table tbody .editable-cell.option.disabled {
  background-color: #ddd;
  opacity: 0.3;
  cursor: not-allowed;
}
.add_bulk_questions_table_wrapper .table tbody .editable-cell.action {
  text-align: center;
}

.weekly-plan-layout-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.weekly-plan-layout-wrapper .form-of-layout-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 15px;
}
@media screen and (min-width: 1230px) {
  .weekly-plan-layout-wrapper .form-of-layout-wrapper {
    max-width: 350px;
    order: 1;
    border-right: 1px solid #eee;
  }
}
.weekly-plan-layout-wrapper .form-of-layout-wrapper form {
  min-width: 350px;
  margin: 0;
}
.weekly-plan-layout-wrapper .form-of-layout-wrapper form .ezdz-dropzone {
  width: 325px;
}
.weekly-plan-layout-wrapper .form-of-layout-wrapper form .checkbox {
  margin: 5px 0;
}
.weekly-plan-layout-wrapper .form-of-layout-wrapper .font-colors-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.weekly-plan-layout-wrapper .form-of-layout-wrapper .font-colors-wrapper li {
  list-style: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin: 5px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.weekly-plan-layout-wrapper .form-of-layout-wrapper .font-colors-wrapper li.selected:before {
  content: "\f00c";
  font-family: FontAwesome;
  color: #fff;
}
.weekly-plan-layout-wrapper .preview-layout-wrapper {
  width: 100%;
}
.weekly-plan-layout-wrapper .preview-layout-wrapper #school-logo {
  display: none;
}
.weekly-plan-layout-wrapper .preview-layout-wrapper .canvas-container {
  width: 100% !important;
}
.weekly-plan-layout-wrapper .preview-layout-wrapper #preview-weekly, .weekly-plan-layout-wrapper .preview-layout-wrapper #preview-weekly-footer {
  height: 100% !important;
  width: 100% !important;
  background: #fafafa;
  border: 2px dashed #ddd;
}
@media screen and (min-width: 1230px) {
  .weekly-plan-layout-wrapper .preview-layout-wrapper {
    width: calc(100% - 350px);
    order: 0;
    padding-left: 10px;
  }
}

/* datatable library */
/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#dt/dt-1.10.18
 *
 * Included libraries:
 *   DataTables 1.10.18
 */
table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
}

table.dataTable thead th, table.dataTable tfoot th {
  font-weight: bold;
}

table.dataTable thead th, table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #111;
}

table.dataTable thead th:active, table.dataTable thead td:active {
  outline: none;
}

table.dataTable tfoot th, table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
  border-top: 1px solid #111;
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  *cursor: hand;
  background-repeat: no-repeat;
  background-position: center right;
}

table.dataTable thead .sorting {
  background-image: url("DataTables-1.10.18/images/sort_both.png");
}

table.dataTable thead .sorting_asc {
  background-image: url("DataTables-1.10.18/images/sort_asc.png");
}

table.dataTable thead .sorting_desc {
  background-image: url("DataTables-1.10.18/images/sort_desc.png");
}

table.dataTable thead .sorting_asc_disabled {
  background-image: url("DataTables-1.10.18/images/sort_asc_disabled.png");
}

table.dataTable thead .sorting_desc_disabled {
  background-image: url("DataTables-1.10.18/images/sort_desc_disabled.png");
}

table.dataTable tbody tr {
  background-color: #ffffff;
}

table.dataTable tbody tr.selected {
  background-color: #B0BED9;
}

table.dataTable tbody th, table.dataTable tbody td {
  padding: 8px 10px;
}

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
  border-top: 1px solid #ddd;
}

table.dataTable.row-border tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th, table.dataTable.display tbody tr:first-child td {
  border-top: none;
}

table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

table.dataTable.cell-border tbody tr th:first-child, table.dataTable.cell-border tbody tr td:first-child {
  border-left: 1px solid #ddd;
}

table.dataTable.cell-border tbody tr:first-child th, table.dataTable.cell-border tbody tr:first-child td {
  border-top: none;
}

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
  background-color: #f9f9f9;
}

table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
  background-color: #acbad4;
}

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  background-color: #f6f6f6;
}

table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
  background-color: #aab7d1;
}

table.dataTable.order-column tbody tr > .sorting_1, table.dataTable.order-column tbody tr > .sorting_2, table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1, table.dataTable.display tbody tr > .sorting_2, table.dataTable.display tbody tr > .sorting_3 {
  background-color: #fafafa;
}

table.dataTable.order-column tbody tr.selected > .sorting_1, table.dataTable.order-column tbody tr.selected > .sorting_2, table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1, table.dataTable.display tbody tr.selected > .sorting_2, table.dataTable.display tbody tr.selected > .sorting_3 {
  background-color: #acbad5;
}

table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
  background-color: #f1f1f1;
}

table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
  background-color: #f3f3f3;
}

table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
  background-color: whitesmoke;
}

table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
  background-color: #a6b4cd;
}

table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
  background-color: #a8b5cf;
}

table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
  background-color: #a9b7d1;
}

table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
  background-color: #fafafa;
}

table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
  background-color: #fcfcfc;
}

table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
  background-color: #fefefe;
}

table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
  background-color: #acbad5;
}

table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
  background-color: #aebcd6;
}

table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
  background-color: #afbdd8;
}

table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
  background-color: #eaeaea;
}

table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
  background-color: #ececec;
}

table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
  background-color: #efefef;
}

table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
  background-color: #a2aec7;
}

table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
  background-color: #a3b0c9;
}

table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
  background-color: #a5b2cb;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #eee;
}

table.dataTable.nowrap th, table.dataTable.nowrap td {
  white-space: nowrap;
}

table.dataTable.compact thead th, table.dataTable.compact thead td {
  padding: 4px 17px 4px 4px;
}

table.dataTable.compact tfoot th, table.dataTable.compact tfoot td {
  padding: 4px;
}

table.dataTable.compact tbody th, table.dataTable.compact tbody td {
  padding: 4px;
}

table.dataTable th.dt-left, table.dataTable td.dt-left {
  text-align: left;
}

table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty {
  text-align: center;
}

table.dataTable th.dt-right, table.dataTable td.dt-right {
  text-align: right;
}

table.dataTable th.dt-justify, table.dataTable td.dt-justify {
  text-align: justify;
}

table.dataTable th.dt-nowrap, table.dataTable td.dt-nowrap {
  white-space: nowrap;
}

table.dataTable thead th.dt-head-left, table.dataTable thead td.dt-head-left, table.dataTable tfoot th.dt-head-left, table.dataTable tfoot td.dt-head-left {
  text-align: left;
}

table.dataTable thead th.dt-head-center, table.dataTable thead td.dt-head-center, table.dataTable tfoot th.dt-head-center, table.dataTable tfoot td.dt-head-center {
  text-align: center;
}

table.dataTable thead th.dt-head-right, table.dataTable thead td.dt-head-right, table.dataTable tfoot th.dt-head-right, table.dataTable tfoot td.dt-head-right {
  text-align: right;
}

table.dataTable thead th.dt-head-justify, table.dataTable thead td.dt-head-justify, table.dataTable tfoot th.dt-head-justify, table.dataTable tfoot td.dt-head-justify {
  text-align: justify;
}

table.dataTable thead th.dt-head-nowrap, table.dataTable thead td.dt-head-nowrap, table.dataTable tfoot th.dt-head-nowrap, table.dataTable tfoot td.dt-head-nowrap {
  white-space: nowrap;
}

table.dataTable tbody th.dt-body-left, table.dataTable tbody td.dt-body-left {
  text-align: left;
}

table.dataTable tbody th.dt-body-center, table.dataTable tbody td.dt-body-center {
  text-align: center;
}

table.dataTable tbody th.dt-body-right, table.dataTable tbody td.dt-body-right {
  text-align: right;
}

table.dataTable tbody th.dt-body-justify, table.dataTable tbody td.dt-body-justify {
  text-align: justify;
}

table.dataTable tbody th.dt-body-nowrap, table.dataTable tbody td.dt-body-nowrap {
  white-space: nowrap;
}

table.dataTable, table.dataTable th, table.dataTable td {
  box-sizing: content-box;
}

.dataTables_wrapper {
  position: relative;
  clear: both;
  *zoom: 1;
  zoom: 1;
}

.dataTables_wrapper .dataTables_length {
  float: left;
}

.dataTables_wrapper .dataTables_filter {
  float: right;
  text-align: right;
}

.dataTables_wrapper .dataTables_filter input {
  margin-left: 0.5em;
}

.dataTables_wrapper .dataTables_info {
  clear: both;
  float: left;
  padding-top: 0.755em;
}

.dataTables_wrapper .dataTables_paginate {
  float: right;
  text-align: right;
  padding-top: 0.25em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  *cursor: hand;
  color: #333 !important;
  border: 1px solid transparent;
  border-radius: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #333 !important;
  border: 1px solid #979797;
  background-color: white;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));
  background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: #666 !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: white !important;
  border: 1px solid #111;
  background-color: #585858;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
  background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
  background: -moz-linear-gradient(top, #585858 0%, #111 100%);
  background: -ms-linear-gradient(top, #585858 0%, #111 100%);
  background: -o-linear-gradient(top, #585858 0%, #111 100%);
  background: linear-gradient(to bottom, #585858 0%, #111 100%);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  outline: none;
  background-color: #2b2b2b;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
  background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
  box-shadow: inset 0 0 3px #111;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
  padding: 0 1em;
}

.dataTables_wrapper .dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 40px;
  margin-left: -50%;
  margin-top: -25px;
  padding-top: 20px;
  text-align: center;
  font-size: 1.2em;
  background-color: white;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  color: #333;
}

.dataTables_wrapper .dataTables_scroll {
  clear: both;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
  *margin-top: -1px;
  -webkit-overflow-scrolling: touch;
  min-height: 300px !important;
  overflow: overlay !important;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
  vertical-align: middle;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td > div.dataTables_sizing {
  height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 1px solid #111;
}

.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable, .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {
  /*border-bottom:none*/
}

.dataTables_wrapper:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

@media screen and (max-width: 767px) {
  .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
  }

  .dataTables_wrapper .dataTables_paginate {
    margin-top: 0.5em;
  }
}
@media screen and (max-width: 640px) {
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center;
  }

  .dataTables_wrapper .dataTables_filter {
    margin-top: 0.5em;
  }
}
@keyframes dtb-spinner {
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes dtb-spinner {
  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes dtb-spinner {
  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dtb-spinner {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes dtb-spinner {
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
div.dt-button-info {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  margin-top: -100px;
  margin-left: -200px;
  background-color: white;
  border: 2px solid #111;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  text-align: center;
  z-index: 21;
}

div.dt-button-info h2 {
  padding: 0.5em;
  margin: 0;
  font-weight: normal;
  border-bottom: 1px solid #ddd;
  background-color: #f3f3f3;
}

div.dt-button-info > div {
  padding: 1em;
}

button.dt-button, div.dt-button, a.dt-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin-right: 0.333em;
  margin-bottom: 0.333em;
  padding: 0.5em 1em;
  border: 1px solid #999;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.88em;
  line-height: 1.6em;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  background-color: #e9e9e9;
  background-image: -webkit-linear-gradient(top, #fff 0%, #e9e9e9 100%);
  background-image: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%);
  background-image: -ms-linear-gradient(top, #fff 0%, #e9e9e9 100%);
  background-image: -o-linear-gradient(top, #fff 0%, #e9e9e9 100%);
  background-image: linear-gradient(to bottom, #fff 0%, #e9e9e9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="white", EndColorStr="#e9e9e9");
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  outline: none;
}

button.dt-button.disabled, div.dt-button.disabled, a.dt-button.disabled {
  color: #999;
  border: 1px solid #d0d0d0;
  cursor: default;
  background-color: #f9f9f9;
  background-image: -webkit-linear-gradient(top, #fff 0%, #f9f9f9 100%);
  background-image: -moz-linear-gradient(top, #fff 0%, #f9f9f9 100%);
  background-image: -ms-linear-gradient(top, #fff 0%, #f9f9f9 100%);
  background-image: -o-linear-gradient(top, #fff 0%, #f9f9f9 100%);
  background-image: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#ffffff", EndColorStr="#f9f9f9");
}

button.dt-button:active:not(.disabled), button.dt-button.active:not(.disabled), div.dt-button:active:not(.disabled), div.dt-button.active:not(.disabled), a.dt-button:active:not(.disabled), a.dt-button.active:not(.disabled) {
  background-color: #e2e2e2;
  background-image: -webkit-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
  background-image: -moz-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
  background-image: -ms-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
  background-image: -o-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
  background-image: linear-gradient(to bottom, #f3f3f3 0%, #e2e2e2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#f3f3f3", EndColorStr="#e2e2e2");
  box-shadow: inset 1px 1px 3px #999999;
}

button.dt-button:active:not(.disabled):hover:not(.disabled), button.dt-button.active:not(.disabled):hover:not(.disabled), div.dt-button:active:not(.disabled):hover:not(.disabled), div.dt-button.active:not(.disabled):hover:not(.disabled), a.dt-button:active:not(.disabled):hover:not(.disabled), a.dt-button.active:not(.disabled):hover:not(.disabled) {
  box-shadow: inset 1px 1px 3px #999999;
  background-color: #cccccc;
  background-image: -webkit-linear-gradient(top, #eaeaea 0%, #ccc 100%);
  background-image: -moz-linear-gradient(top, #eaeaea 0%, #ccc 100%);
  background-image: -ms-linear-gradient(top, #eaeaea 0%, #ccc 100%);
  background-image: -o-linear-gradient(top, #eaeaea 0%, #ccc 100%);
  background-image: linear-gradient(to bottom, #eaeaea 0%, #ccc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#eaeaea", EndColorStr="#cccccc");
}

button.dt-button:hover, div.dt-button:hover, a.dt-button:hover {
  text-decoration: none;
}

button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled) {
  border: 1px solid #666;
  background-color: #e0e0e0;
  background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
  background-image: -moz-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
  background-image: -ms-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
  background-image: -o-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
  background-image: linear-gradient(to bottom, #f9f9f9 0%, #e0e0e0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#f9f9f9", EndColorStr="#e0e0e0");
}

button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled) {
  border: 1px solid #426c9e;
  text-shadow: 0 1px 0 #c4def1;
  outline: none;
  background-color: #79ace9;
  background-image: -webkit-linear-gradient(top, #bddef4 0%, #79ace9 100%);
  background-image: -moz-linear-gradient(top, #bddef4 0%, #79ace9 100%);
  background-image: -ms-linear-gradient(top, #bddef4 0%, #79ace9 100%);
  background-image: -o-linear-gradient(top, #bddef4 0%, #79ace9 100%);
  background-image: linear-gradient(to bottom, #bddef4 0%, #79ace9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#bddef4", EndColorStr="#79ace9");
}

.dt-button embed {
  outline: none;
}

div.dt-buttons {
  position: relative;
  float: left;
}

div.dt-buttons.buttons-right {
  float: right;
}

div.dt-button-collection {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  margin-top: 3px;
  padding: 8px 8px 4px 8px;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-color: white;
  overflow: hidden;
  z-index: 2002;
  border-radius: 5px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  -webkit-column-gap: 8px;
  -moz-column-gap: 8px;
  -ms-column-gap: 8px;
  -o-column-gap: 8px;
  column-gap: 8px;
}

div.dt-button-collection button.dt-button, div.dt-button-collection div.dt-button, div.dt-button-collection a.dt-button {
  position: relative;
  left: 0;
  right: 0;
  width: 100%;
  display: block;
  float: none;
  margin-bottom: 4px;
  margin-right: 0;
}

div.dt-button-collection button.dt-button:active:not(.disabled), div.dt-button-collection button.dt-button.active:not(.disabled), div.dt-button-collection div.dt-button:active:not(.disabled), div.dt-button-collection div.dt-button.active:not(.disabled), div.dt-button-collection a.dt-button:active:not(.disabled), div.dt-button-collection a.dt-button.active:not(.disabled) {
  background-color: #dadada;
  background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
  background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
  background-image: -ms-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
  background-image: -o-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
  background-image: linear-gradient(to bottom, #f0f0f0 0%, #dadada 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#f0f0f0", EndColorStr="#dadada");
  box-shadow: inset 1px 1px 3px #666;
}

div.dt-button-collection.fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -75px;
  border-radius: 0;
}

div.dt-button-collection.fixed.two-column {
  margin-left: -150px;
}

div.dt-button-collection.fixed.three-column {
  margin-left: -225px;
}

div.dt-button-collection.fixed.four-column {
  margin-left: -300px;
}

div.dt-button-collection > * {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}

div.dt-button-collection.two-column {
  width: 300px;
  padding-bottom: 1px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
}

div.dt-button-collection.three-column {
  width: 450px;
  padding-bottom: 1px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  -o-column-count: 3;
  column-count: 3;
}

div.dt-button-collection.four-column {
  width: 600px;
  padding-bottom: 1px;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  -ms-column-count: 4;
  -o-column-count: 4;
  column-count: 4;
}

div.dt-button-collection .dt-button {
  border-radius: 0;
}

div.dt-button-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
  background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 2001;
}

@media screen and (max-width: 640px) {
  div.dt-buttons {
    float: none !important;
    text-align: center;
  }
}
button.dt-button.processing, div.dt-button.processing, a.dt-button.processing {
  color: rgba(0, 0, 0, 0.2);
}

button.dt-button.processing:after, div.dt-button.processing:after, a.dt-button.processing:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  box-sizing: border-box;
  display: block;
  content: " ";
  border: 2px solid #282828;
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: dtb-spinner 1500ms infinite linear;
  -o-animation: dtb-spinner 1500ms infinite linear;
  -ms-animation: dtb-spinner 1500ms infinite linear;
  -webkit-animation: dtb-spinner 1500ms infinite linear;
  -moz-animation: dtb-spinner 1500ms infinite linear;
}

table.dataTable.dt-checkboxes-select tbody tr,
table.dataTable thead th.dt-checkboxes-select-all,
table.dataTable tbody td.dt-checkboxes-cell {
  cursor: pointer;
}

table.dataTable thead th.dt-checkboxes-select-all,
table.dataTable tbody td.dt-checkboxes-cell {
  text-align: center;
}

div.dataTables_wrapper span.select-info,
div.dataTables_wrapper span.select-item {
  margin-left: 0.5em;
}

@media screen and (max-width: 640px) {
  div.dataTables_wrapper span.select-info,
div.dataTables_wrapper span.select-item {
    margin-left: 0;
    display: block;
  }
}
table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
  background-color: #B0BED9;
}

table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected, table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected {
  background-color: #acbad4;
}

table.dataTable.hover tbody > tr.selected:hover, table.dataTable.hover tbody > tr > .selected:hover, table.dataTable.display tbody > tr.selected:hover, table.dataTable.display tbody > tr > .selected:hover {
  background-color: #aab7d1;
}

table.dataTable.order-column tbody > tr.selected > .sorting_1, table.dataTable.order-column tbody > tr.selected > .sorting_2, table.dataTable.order-column tbody > tr.selected > .sorting_3, table.dataTable.order-column tbody > tr > .selected, table.dataTable.display tbody > tr.selected > .sorting_1, table.dataTable.display tbody > tr.selected > .sorting_2, table.dataTable.display tbody > tr.selected > .sorting_3, table.dataTable.display tbody > tr > .selected {
  background-color: #acbad5;
}

table.dataTable.display tbody > tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1 {
  background-color: #a6b4cd;
}

table.dataTable.display tbody > tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_2 {
  background-color: #a8b5cf;
}

table.dataTable.display tbody > tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_3 {
  background-color: #a9b7d1;
}

table.dataTable.display tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1 {
  background-color: #acbad5;
}

table.dataTable.display tbody > tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_2 {
  background-color: #aebcd6;
}

table.dataTable.display tbody > tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_3 {
  background-color: #afbdd8;
}

table.dataTable.display tbody > tr.odd > .selected, table.dataTable.order-column.stripe tbody > tr.odd > .selected {
  background-color: #a6b4cd;
}

table.dataTable.display tbody > tr.even > .selected, table.dataTable.order-column.stripe tbody > tr.even > .selected {
  background-color: #acbad5;
}

table.dataTable.display tbody > tr.selected:hover > .sorting_1, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_1 {
  background-color: #a2aec7;
}

table.dataTable.display tbody > tr.selected:hover > .sorting_2, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_2 {
  background-color: #a3b0c9;
}

table.dataTable.display tbody > tr.selected:hover > .sorting_3, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_3 {
  background-color: #a5b2cb;
}

table.dataTable.display tbody > tr:hover > .selected, table.dataTable.display tbody > tr > .selected:hover, table.dataTable.order-column.hover tbody > tr:hover > .selected, table.dataTable.order-column.hover tbody > tr > .selected:hover {
  background-color: #a2aec7;
}

table.dataTable tbody td.select-checkbox, table.dataTable tbody th.select-checkbox {
  position: relative;
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody td.select-checkbox:after, table.dataTable tbody th.select-checkbox:before, table.dataTable tbody th.select-checkbox:after {
  display: block;
  position: absolute;
  top: 1.2em;
  left: 50%;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
  content: " ";
  margin-top: -6px;
  margin-left: -6px;
  border: 1px solid black;
  border-radius: 3px;
}

table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
  content: "✔";
  margin-top: -11px;
  margin-left: -4px;
  text-align: center;
  text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}

div.dataTables_wrapper span.select-info, div.dataTables_wrapper span.select-item {
  margin-left: 0.5em;
}

@media screen and (max-width: 640px) {
  div.dataTables_wrapper span.select-info, div.dataTables_wrapper span.select-item {
    margin-left: 0;
    display: block;
  }
}
table.dt-rowReorder-float {
  position: absolute !important;
  opacity: 0.8;
  table-layout: fixed;
  outline: 2px solid #888;
  outline-offset: -2px;
  z-index: 2001;
}

tr.dt-rowReorder-moving {
  outline: 2px solid #555;
  outline-offset: -2px;
}

body.dt-rowReorder-noOverflow {
  overflow-x: hidden;
}

table.dataTable td.reorder {
  text-align: center;
  cursor: move;
}

table.dataTable {
  clear: both;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  max-width: none !important;
  border-collapse: separate !important;
}

table.dataTable td, table.dataTable th {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

table.dataTable td.dataTables_empty, table.dataTable th.dataTables_empty {
  text-align: center;
}

table.dataTable.nowrap th, table.dataTable.nowrap td {
  white-space: nowrap;
}

div.dataTables_wrapper div.dataTables_length label {
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
}

div.dataTables_wrapper div.dataTables_length select {
  width: 75px;
  display: inline-block;
}

div.dataTables_wrapper div.dataTables_filter {
  text-align: right;
}

div.dataTables_wrapper div.dataTables_filter label {
  font-weight: normal;
  white-space: nowrap;
  text-align: left;
}

div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 0.5em;
  display: inline-block;
  width: auto;
}

div.dataTables_wrapper div.dataTables_info {
  padding-top: 8px;
  white-space: nowrap;
}

div.dataTables_wrapper div.dataTables_paginate {
  margin: 0;
  white-space: nowrap;
  text-align: right;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 2px 0;
  white-space: nowrap;
}

div.dataTables_wrapper div.dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  margin-top: -26px;
  text-align: center;
  padding: 1em 0;
}

table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting {
  padding-right: 30px;
}

table.dataTable thead > tr > th:active, table.dataTable thead > tr > td:active {
  outline: none;
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  position: relative;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: block;
  font-family: "Glyphicons Halflings";
  opacity: 0.5;
}

table.dataTable thead .sorting:after {
  opacity: 0.2;
  content: "\e150";
}

table.dataTable thead .sorting_asc:after {
  content: "\e155";
}

table.dataTable thead .sorting_desc:after {
  content: "\e156";
}

table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
  color: #eee;
}

div.dataTables_scrollHead table.dataTable {
  margin-bottom: 0 !important;
}

div.dataTables_scrollBody > table {
  border-top: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

div.dataTables_scrollBody > table > thead .sorting:after, div.dataTables_scrollBody > table > thead .sorting_asc:after, div.dataTables_scrollBody > table > thead .sorting_desc:after {
  display: none;
}

div.dataTables_scrollBody > table > tbody > tr:first-child > th, div.dataTables_scrollBody > table > tbody > tr:first-child > td {
  border-top: none;
}

div.dataTables_scrollFoot > .dataTables_scrollFootInner {
  box-sizing: content-box;
}

div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
  margin-top: 0 !important;
  border-top: none;
}

@media screen and (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
    text-align: center;
  }
}
table.dataTable.table-condensed > thead > tr > th {
  padding-right: 20px;
}

table.dataTable.table-condensed .sorting:after, table.dataTable.table-condensed .sorting_asc:after, table.dataTable.table-condensed .sorting_desc:after {
  top: 6px;
  right: 6px;
}

table.table-bordered.dataTable th, table.table-bordered.dataTable td {
  border-left-width: 0;
}

table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child, table.table-bordered.dataTable td:last-child {
  border-right-width: 0;
}

table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
  border-bottom-width: 0;
}

div.dataTables_scrollHead table.table-bordered {
  border-bottom-width: 0;
}

div.table-responsive > div.dataTables_wrapper > div.row {
  margin: 0;
}

div.table-responsive > div.dataTables_wrapper > div.row > div[class^=col-]:first-child {
  padding-left: 0;
}

div.table-responsive > div.dataTables_wrapper > div.row > div[class^=col-]:last-child {
  padding-right: 0;
}

.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table {
  width: 100% !important;
}

.dataTables_scrollBody table {
  height: 100%;
}

table.dataTable tbody tr a:not(.btn-primary, .btn-warning) {
  color: var(--main-color);
}
table.dataTable tbody tr a:not(.btn-primary, .btn-warning):hover {
  color: rgba(var(--main-color-rgb), 90%);
}

.dataTables_scrollHeadInner .table thead tr {
  background: transparent !important;
}

table.dataTable thead th, table.dataTable thead td, .dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 1px solid #e2e2e2 !important;
}

.dataTables_wrapper .dt-button {
  font-size: 12px;
  background: var(--main-color);
  border-radius: 23px;
  border: 1px solid var(--main-color);
  color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  padding: 7px 15px;
  transition: all ease-in-out 0.3s;
}
.dataTables_wrapper .dt-button.sw-cache-btn {
  color: #D73D33;
  font-weight: 700;
  box-shadow: 0 2px 7px rgba(239, 25, 25, 0.25);
}
.dataTables_wrapper .dt-button.sw-cache-btn p {
  margin: 0;
  display: inline-block;
}
@media (max-width: 400px) {
  .dataTables_wrapper .dt-button.sw-cache-btn {
    box-shadow: unset;
  }
  .dataTables_wrapper .dt-button.sw-cache-btn span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 0;
    justify-content: center;
  }
  .dataTables_wrapper .dt-button.sw-cache-btn span i {
    margin-left: 5px;
  }
}

.dataTables_wrapper .div.dt-buttons {
  margin-bottom: 12px;
}

button.dt-button:not(.disabled), div.dt-button:not(.disabled), a.dt-button:not(.disabled) {
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
  background: #fff !important;
  color: var(--main-color);
  border: 1px solid #fff !important;
}

button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled):focus {
  box-shadow: 0 6px 7px rgba(0, 0, 0, 0.25);
  background: #fff;
  color: var(--main-color);
  border: 1px solid #fff;
}

button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled) {
  background-color: white !important;
}

button.dt-button:active:not(.disabled) {
  background: var(--main-color) !important;
  color: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
  border-color: var(--main-color) !important;
}

button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled) {
  background: var(--main-color) !important;
  color: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
  border-color: var(--main-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: transparent !important;
  border-color: transparent !important;
}

.dataTables_wrapper .pagination > li > a, .pagination > li > a {
  background-color: #fff;
  border-color: var(--main-color);
  color: var(--main-color);
}

.dataTables_wrapper .pagination > li.active > a, .pagination > li.active > a:hover, div.dt-button-collection button.dt-button.active:not(.disabled) {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  color: #ffffff;
  box-shadow: none;
}

.pagination > li.disabled > a {
  opacity: 0.4;
}

.dataTables_wrapper div.dt-button-collection .buttons-columnVisibility, div.dt-button-collection .dt-button {
  background: white !important;
  box-shadow: none;
  border: 1px solid var(--main-color) !important;
  border-radius: 5px;
}

.dataTables_wrapper div.dt-button-collection .buttons-columnVisibility.active, div.dt-button-collection .dt-button:hover {
  background: var(--main-color) !important;
  color: #fff;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0 !important;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
  opacity: 0 !important;
}

table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
  background: #e7e7e7 !important;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
  text-align: center;
}

.dataTables_wrapper .open-status, .dataTables_wrapper .status-InQA, .dataTables_wrapper .status-NotDoable, .dataTables_wrapper .status-AddedToBacklog, .dataTables_wrapper .status-PendingDevelopment, .dataTables_wrapper .in-progress-status, .dataTables_wrapper .closed-status, .dataTables_wrapper .pending-status, .dataTables_wrapper .team-dropdown, .status-PendingActivationtReply {
  margin: -6px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  white-space: pre-line;
}

@media only screen and (max-width: 600px) {
  table.dataTable.table-condensed > thead > tr > th, table.dataTable.table-condensed > tbody > tr > td {
    width: 100px !important;
  }
}
.dataTables_scrollBody table td:not(.dt-checkboxes-cell) {
  max-width: 200px !important;
  min-width: 100px !important;
}

.dataTables_scrollBody table {
  min-width: 100% !important;
}

.dataTables_scrollHeadInner {
  padding: 0 !important;
}

table.dataTable tbody tr {
  background: transparent;
}

table.dataTable thead .sorting_asc {
  background-image: url(../../js/DataTables/DataTables-1.10.18/images/sort_asc.png);
}

table.dataTable thead .sorting {
  background-image: url("../../js/DataTables/DataTables-1.10.18/images/sort_both.png");
}

table.dataTable thead .sorting_desc {
  background-image: url("../../js/DataTables/DataTables-1.10.18/images/sort_desc.png");
}

table.dataTable thead .sorting_asc_disabled {
  background-image: url("../../js/DataTables/DataTables-1.10.18/images/sort_asc_disabled.png");
}

table.dataTable thead .sorting_desc_disabled {
  background-image: url("../../js/DataTables/DataTables-1.10.18/images/sort_desc_disabled.png");
}

table.table-bordered.dataTable th, table.table-bordered.dataTable td {
  border-right-width: 0;
  border-left-width: 1px;
}

table.table-bordered.dataTable tbody th img, table.table-bordered.dataTable tbody td img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.datatable_wrapper_box {
  /*background:$sidemenu_bg;
  border-radius: 7px;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);*/
  /*.table a{ color: #01a7e5; }*/
}

@media screen and (max-width: 550px) {
  div.dataTables_wrapper div.dataTables_info {
    word-break: break-word;
    max-width: 100%;
    white-space: break-spaces;
  }
}
#report_cards_grid_wrapper table.dataTable .fa-lock {
  color: #aeaeae;
  font-size: 18px;
}
#report_cards_grid_wrapper table.dataTable .fa-unlock {
  color: var(--main-color);
  font-size: 18px;
}
#report_cards_grid_wrapper table.dataTable .fa-unlock.not-clickable {
  color: #e5301c;
}

.bus-trips-wrapper-two {
  padding: 5px;
  margin-bottom: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  color: #444;
}

#registration_approval_table thead input {
  border-radius: 3px;
  min-height: 32px;
}
#registration_approval_table.empty_table {
  background: #fafafa;
}
#registration_approval_table .btn {
  margin: 4px;
}

.cpay_not_active_wrapper {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cpay_not_active_wrapper .cpay_not_active_img {
  width: 100%;
  margin-top: 20px;
  max-width: 500px;
}

.fees_details_wrapper.show {
  opacity: 1 !important;
}
.fees_details_wrapper .fees_form_wrapper i {
  font-style: normal;
}
.fees_details_wrapper .fees_form_wrapper h4 {
  margin: 3px 0;
  font-weight: bold !important;
  color: #444;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_content {
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 25px 15px 20px;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_content #list_of_invoices .no_data {
  color: #777;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_content #list_of_invoices .plan_fees_label {
  padding: 2px 9px;
  border-radius: 15px;
  font-size: 11px;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_content #list_of_invoices .plan_fees_label.active {
  background: var(--main-color);
  color: #fff;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_content #list_of_invoices .plan_fees_label.expired {
  background: #e5301c;
  color: #fff;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_content #list_of_invoices .plan_fees_label.disable {
  background: #ddd;
  color: #444;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_content #list_of_invoices .invoice_name {
  display: flex;
  justify-content: space-between;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_content #list_of_invoices .invoice_name h4 {
  margin-top: 10px;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_content .invoice_item .invoice_id {
  color: #777;
  font-size: 11px;
}
.fees_details_wrapper .fees_form_wrapper .form_label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}
.fees_details_wrapper .fees_form_wrapper #list_of_invoices {
  padding: 15px 0;
  border-bottom: 1px dashed #ddd;
}
.fees_details_wrapper .fees_form_wrapper #list_of_invoices .invoice_item {
  padding: 15px 0;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_submit_section {
  padding: 20px 0 10px;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_submit_section .total_amount {
  display: flex;
  justify-content: space-between;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_submit_section .number_of_invoices {
  color: #777;
  margin-right: 10px;
  font-weight: 300;
  font-size: 12px;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_submit_section .submit_section {
  text-align: center;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_submit_section .submit_section .submit_button {
  padding: 10px;
  width: 100%;
  border: 0;
  outline: 0 !important;
  background: var(--main-color);
  transition: all ease-in-out 0.3s;
  border-radius: 25px;
  color: #fff;
  font-weight: 500;
  margin-top: 20px;
}
.fees_details_wrapper .fees_form_wrapper .fees_form_submit_section .submit_section .submit_button:hover {
  background: rgba(var(--main-color-rgb), 90%);
}
.fees_details_wrapper .fees_form_wrapper .fees_form_submit_section .submit_section .submit_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fees_details_wrapper .fees_table_wrapper {
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 15px;
  overflow-x: auto;
}
.fees_details_wrapper .fees_table_wrapper #fees_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1em;
  position: relative;
}
.fees_details_wrapper .fees_table_wrapper #fees_table.disabled:before {
  content: "";
  width: 100%;
  height: calc(100% - 73px);
  background: #fff;
  opacity: 0.6;
  position: absolute;
  z-index: 1;
}
.fees_details_wrapper .fees_table_wrapper #fees_table thead {
  background: #eee;
  color: #777;
  border-radius: 5px;
}
.fees_details_wrapper .fees_table_wrapper #fees_table thead th {
  padding: 9px;
  font-weight: 400;
  text-align: center;
  font-size: 12px;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody {
  text-align: center;
  font-size: 14px;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody tr {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  outline: 1px solid #ddd !important;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody tr.selected {
  outline: 2px solid var(--main-color) !important;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody tr td {
  padding: 8px 4px;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody tr td.invoice_name_wrapper_td {
  text-align: right;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .invoice_name_wrapper span {
  padding: 2px 9px;
  border-radius: 15px;
  font-size: 11px;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .invoice_name_wrapper span.active {
  background: var(--main-color);
  color: #fff;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .invoice_name_wrapper span.expired {
  background: #e5301c;
  color: #fff;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .invoice_name_wrapper span.disable {
  background: #ddd;
  color: #444;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .invoice_name_wrapper h4 {
  margin: 3px 0 -3px;
  font-weight: bold !important;
  color: #444;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .invoice_name_wrapper p {
  margin-bottom: 0;
  color: #777;
  font-size: 11px;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .invoice_name_wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .row_actions_wrapper {
  padding-left: 10px;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .row_actions_wrapper .view_details {
  cursor: pointer;
  color: var(--main-color);
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .row_actions_wrapper .view_details:hover {
  color: rgba(var(--main-color-rgb), 90%);
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .row_actions_wrapper .download_invoice {
  border: 0;
  outline: 0 !important;
  background: transparent;
  margin-right: 10px;
  font-size: 15px;
  color: #777;
  transition: all ease-in-out 0.3s;
  cursor: pointer;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .row_actions_wrapper .download_invoice:hover {
  color: #444;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .status_box {
  padding: 6px 11px;
  border-radius: 25px;
  border: 1px solid #66BB6A;
  max-width: 120px;
}
.fees_details_wrapper .fees_table_wrapper #fees_table tbody .status_box.paid {
  border: 1px solid var(--main-color);
}
.fees_details_wrapper .fees_table_wrapper #fees_table .select_row_checkbox_wrapper {
  text-align: center;
  padding-right: 10px;
}
.fees_details_wrapper .fees_table_wrapper #fees_table .select_row_checkbox_wrapper .checkbox_style {
  border: 1px solid #ddd;
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border-radius: 50%;
  cursor: pointer;
}
.fees_details_wrapper .fees_table_wrapper #fees_table .select_row_checkbox_wrapper input:checked + .checkbox_style:before {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--main-color);
}
.fees_details_wrapper .fees_table_wrapper #fees_table .select_row_checkbox_wrapper input {
  display: none;
}
.fees_details_wrapper .fees_table_wrapper .table_pagination {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fees_details_wrapper .fees_table_wrapper .table_pagination .prev, .fees_details_wrapper .fees_table_wrapper .table_pagination .next {
  font-size: 20px;
}
.fees_details_wrapper .fees_table_wrapper .table_pagination button {
  border: 0;
  outline: 0 !important;
  background: transparent;
  color: #444;
  margin: 0 6px;
  font-weight: bold;
  font-size: 16px;
}
.fees_details_wrapper .fees_table_wrapper .table_pagination button.active {
  color: var(--main-color);
  pointer-events: none;
}
.fees_details_wrapper .fees_table_wrapper .table_pagination button.expired {
  background: #e5301c;
  color: #fff;
}
.fees_details_wrapper .fees_table_wrapper .table_pagination button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.fees_details_wrapper .fees_table_wrapper .table_pagination .pages_number {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fees_details_wrapper .fees_table_wrapper .payment_field_wrapper {
  position: relative;
  display: inline-block;
}
.fees_details_wrapper .fees_table_wrapper .payment_field_wrapper .currency-label {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
}
.fees_details_wrapper .fees_table_wrapper .payment_field_wrapper .payment_field_input {
  height: 30px;
  padding-right: 10px;
  width: 120px;
  border-radius: 4px;
}
.fees_details_wrapper .fees_table_wrapper .payment_field_wrapper .payment_field_input[disabled=true] {
  opacity: 0.7;
  cursor: not-allowed;
}
.fees_details_wrapper .fees_table_wrapper .payment_field_wrapper .payment_field_input:focus {
  border: 1px solid var(--main-color);
}
.fees_details_wrapper .fees_table_search_wrapper {
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 15px;
}
@media screen and (max-width: 523px) {
  .fees_details_wrapper .fees_table_search_wrapper {
    flex-direction: column;
  }
}
.fees_details_wrapper .fees_table_search_wrapper .input_search_warpper {
  flex: 1;
  width: 100%;
}
@media screen and (min-width: 523px) {
  .fees_details_wrapper .fees_table_search_wrapper .input_search_warpper {
    margin-left: 10px;
  }
}
.fees_details_wrapper .fees_table_search_wrapper .input_search_warpper .select {
  padding: 0;
}
.fees_details_wrapper .fees_table_search_wrapper .apply_search {
  margin-right: 10px;
  border-radius: 25px;
  padding: 8px 20px;
  border: 0;
  outline: 0 !important;
  color: #fff;
  background: var(--main-color);
  height: 44px;
}
.fees_details_wrapper .fees_table_search_wrapper .apply_search.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* success partner stu style*/
.sp-detail {
  font-style: normal;
}

.publish-btn {
  display: none;
}

.sp-offer {
  position: relative;
  height: 200px;
  background: #000;
  color: #FFF;
}

.sp-offer:hover, .sp-offer:focus {
  color: #FFF;
  opacity: 0.5;
}

.sp-offer * {
  z-index: 1;
  position: absolute;
}

.sp-offer img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.6;
}

.sp-offer h2 {
  top: 5px;
  left: 5px;
}

.sp-offer p {
  bottom: 5px;
  right: 5px;
}

.sp-offer i {
  top: 5px;
  right: 5px;
  font-size: 2em;
}

.sp-offer:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
  background: -moz-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#00ffffff",GradientType=1 );
  /* IE6-9 */
}

div.discount-offers-container {
  width: 100%;
  margin: 16px auto;
  text-align: center;
  overflow-x: auto;
}

.discount-offer {
  display: inline-block;
  margin: 0 auto;
  width: 400px;
  overflow: hidden;
}

.discount-chart:after {
  content: "";
  display: inline-block;
  height: 100%;
}

.discount-chart {
  list-style: none;
  height: 300px;
  position: relative;
  padding-top: 30px;
  text-align: center;
}

.discount-offer h4 {
  font-size: 1.6em !important;
}

.discount-chart li {
  display: inline-block;
  width: 60px;
  background: #868686;
  margin: 0 1px;
  color: #000;
  height: 0;
  text-align: center;
  position: relative;
  color: #FFF;
  text-align: center;
  border-radius: 5px 5px 0 0;
}

.discount-chart li i {
  position: absolute;
  top: 20%;
  left: 0;
  font-style: normal;
  width: 100%;
}

.discount-chart li span {
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  color: #444;
}

.discount-chart li.Diamond {
  background: #e8b5bf;
}

.discount-chart li.Green {
  background: #b3eeaa;
}

.discount-chart li.Silver {
  background: #ededed;
}

.discount-chart li.Golden {
  background: #d9ba46;
}

.discount-chart li.Platinum {
  background: #e4d8bb;
}

.educationPartnerDetails {
  margin-top: 10px;
}
.educationPartnerDetails iframe {
  max-width: 100% !important;
}
.educationPartnerDetails .educationPartnersHead, .educationPartnerDetails .educationPartnersBody {
  background: #fff;
  border-radius: 15px;
}
.educationPartnerDetails .educationPartnersHead {
  height: 300px;
  display: flex;
  grid-template-columns: 20% 80%;
  flex-wrap: wrap;
  overflow: hidden;
  border: 1px solid #fff;
}
.educationPartnerDetails .educationPartnersHead .edu-head-mask {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #5B86E5 0%, var(--main-color) 100%);
}
.educationPartnerDetails .educationPartnersHead .edu-head-mask img {
  max-width: 100%;
  opacity: 0.3;
}
.educationPartnerDetails .educationPartnersHead .headTitle {
  overflow: hidden;
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 300px;
  display: grid;
}
.educationPartnerDetails .educationPartnersHead .headTitle .edu-head-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.educationPartnerDetails .educationPartnersHead .headTitle .educationTitle, .educationPartnerDetails .educationPartnersHead .headTitle .educationSite {
  z-index: 1;
  color: #fff;
  text-align: center;
}
.educationPartnerDetails .educationPartnersHead .headTitle .educationTitle a, .educationPartnerDetails .educationPartnersHead .headTitle .educationSite a {
  color: #fff;
}
.educationPartnerDetails .educationPartnersHead .headLogo {
  min-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 750px) {
  .educationPartnerDetails .educationPartnersHead .headLogo {
    min-width: 200px;
  }
}
.educationPartnerDetails .educationPartnersBody .education-details-item {
  margin-top: 20px;
  padding: 20px;
}
.educationPartnerDetails .educationPartnersBody .item-title {
  position: relative;
}
.educationPartnerDetails .educationPartnersBody .item-title .item-title-bg {
  position: absolute;
  right: 0;
  bottom: -7px;
  color: #444;
  font-size: 1.9em;
  opacity: 0.1;
  font-weight: bold;
}
.educationPartnerDetails .educationPartnersBody .item-desc {
  color: #aeaeae;
}
.educationPartnerDetails .educationPartnersBody ul.item-desc li {
  display: inline-block;
  list-style: none;
  padding: 6px 10px;
  color: var(--main-color);
  border: 1px solid;
  border-radius: 25px;
  margin: 0 8px;
}
.educationPartnerDetails .educationPartnersBody ul.item-desc li:nth-child(6n+2) {
  color: #FC3176;
}
.educationPartnerDetails .educationPartnersBody ul.item-desc li:nth-child(6n+3) {
  color: #79060F;
}
.educationPartnerDetails .educationPartnersBody ul.item-desc li:nth-child(6n+4) {
  color: #BA8641;
}

#categories_list .owl-prev, #categories_list .owl-next {
  color: var(--main-color);
}

.success-partners-categories {
  background: #eee;
  box-shadow: 0px 3px 6px #00000029;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 3rem;
}
.success-partners-categories .show-all {
  border: 2px solid var(--main-color);
  cursor: pointer;
  padding: 1rem 2rem;
  border-radius: 8px;
  color: #444;
}
.success-partners-categories .category {
  background: #ddd;
  border-radius: 100px;
  width: 13rem;
  height: 13rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}
.success-partners-categories .category_active {
  border-radius: 10px;
  color: var(--main-color) !important;
}
.success-partners-categories .category_container {
  color: #939393;
}
.success-partners-categories .category_active .category {
  box-shadow: 0 0 0 6px var(--main-color) inset;
}

.success-partners-sub-categories {
  margin: 3rem 0rem;
}
.success-partners-sub-categories .sub_category {
  border: 1px #ddd solid;
}
.success-partners-sub-categories #sub_categories_list .owl-item {
  width: auto !important;
  max-width: 20rem;
}
.success-partners-sub-categories .sub_category_active {
  box-shadow: 0 0 0 3px var(--main-color) inset;
}

.success-partner-search {
  display: flex;
  align-items: center;
  background: transparent;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 25px;
}

.translations-wrapper {
  padding: 0 20px;
}
@media screen and (max-width: 700px) {
  .translations-wrapper {
    padding: 0 15px;
  }
}
.translations-wrapper .translations-title {
  color: var(--main-color);
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.translations-wrapper .translations-section-description {
  color: #aeaeae;
}
.translations-wrapper .translations-options-list {
  display: grid;
  grid-template-columns: 21.25% 21.25% 21.25% 21.25% 15%;
  margin-top: 20px;
}
.translations-wrapper .translations-options-list .form-group {
  margin: 0 10px;
}
.translations-wrapper .translations-options-list .form-group:first-child {
  margin-right: 0;
}
.translations-wrapper .translations-options-list .form-group:last-child {
  margin-left: 0;
}
.translations-wrapper .translations-options-list .form-group.form-group-actions {
  padding-top: 25px;
}
.translations-wrapper .translations-options-list .form-group label {
  color: #aeaeae;
}
.translations-wrapper .translations-options-list .form-group .chosen-container {
  max-width: 100%;
}
@media screen and (max-width: 1250px) {
  .translations-wrapper .translations-options-list {
    grid-template-columns: 33.3% 33.3% 33.3%;
  }
  .translations-wrapper .translations-options-list .form-group {
    margin: 0 5px;
  }
}
@media screen and (max-width: 700px) {
  .translations-wrapper .translations-options-list {
    grid-template-columns: 50% 50%;
  }
}
.translations-wrapper .add-new-translation {
  border-top: 2px solid #ddd;
  padding-top: 15px;
  margin-top: 25px;
}
.translations-wrapper .add-new-translation .serach-input-wrapper-box {
  flex: 1;
}
.translations-wrapper .add-new-translation .serach-input-wrapper-box .serach-input {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
}
.translations-wrapper .add-new-translation .serach-input-wrapper-box .serach-input input {
  padding-right: 40px;
  width: 100%;
}
.translations-wrapper .add-new-translation .serach-input-wrapper-box .serach-input i {
  position: absolute;
  left: 13px;
  font-size: 1.3em;
  top: 50%;
  transform: translateY(-50%);
  color: #aeaeae;
}
.translations-wrapper .add-new-translation .serach-input-wrapper-box .serach-input ul.search-list {
  list-style: none;
  position: absolute;
  top: 46px;
  left: 0;
  background: #fff;
  width: calc(100% - 17px);
  box-shadow: 0 6px 10px -3px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  z-index: 1;
}
@media screen and (max-width: 991px) {
  .translations-wrapper .add-new-translation .serach-input-wrapper-box .serach-input ul.search-list {
    width: calc(100% - 34px);
    left: 50%;
    transform: translateX(-50%);
  }
}
.translations-wrapper .add-new-translation .serach-input-wrapper-box .serach-input ul.search-list li {
  padding: 10px;
  cursor: pointer;
}
@media screen and (min-width: 992px) {
  .translations-wrapper .add-new-translation .serach-input-wrapper-box .serach-input {
    /*  &.input-langauge-to-search{
    .form-control{
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
     }*/
  }
  .translations-wrapper .add-new-translation .serach-input-wrapper-box .serach-input.select-langauge-to-search .select-styled {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    min-height: 46px;
  }
}
.translations-wrapper .add-new-translation.disabled {
  position: relative;
  opacity: 0.9;
}
.translations-wrapper .add-new-translation.disabled:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 1;
}
.translations-wrapper .add-new-translation.disabled .selectOptionFirstBox {
  display: flex !important;
}
.translations-wrapper .add-new-translation.disabled .translation-nav-tabs li.active {
  border-color: #aeaeae;
}
.translations-wrapper .add-new-translation.disabled .translation-nav-tabs li.active a {
  color: #aeaeae;
}
.translations-wrapper .add-new-translation.disabled .add-new-form-side .add-new-top h4 {
  color: #aeaeae !important;
}
.translations-wrapper .add-new-translation.disabled .add-new-form-side .add-new-top:before {
  background: #aeaeae !important;
}
.translations-wrapper .translations-btn-style {
  width: 90%;
  border-radius: 25px;
  height: 45px;
  background-color: transparent !important;
  color: var(--main-color);
  border-color: var(--main-color);
  padding-right: 25px;
}
.translations-wrapper .translations-btn-style:hover {
  background-color: var(--main-color) !important;
  color: #fff;
}
.translations-wrapper .translations-btn-style i {
  position: absolute;
  right: 14px;
  font-size: 1.3em;
}
.translations-wrapper .add-new-form-section .form-box {
  border-radius: 4px;
  display: grid;
  grid-template-columns: 50% 50%;
  border: 1px solid #ddd;
  background: #fff;
  position: relative;
}
.translations-wrapper .add-new-form-section .form-box .selectOptionFirstBox {
  display: none;
  position: absolute;
  bottom: 10px;
  width: 97%;
  left: 50%;
  height: calc(100% - 95px);
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #ddd;
  z-index: 1;
  align-items: center;
  padding: 20px;
  border-radius: 7px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.translations-wrapper .add-new-form-section .form-box .selectOptionFirstBox i {
  font-size: 16px;
  border-radius: 50%;
  border: 1px solid var(--main-color);
  width: 25px;
  height: 25px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  margin-left: 10px;
  color: var(--main-color);
}
.translations-wrapper .add-new-form-section .form-box .selectOptionFirstBox p {
  margin-bottom: 0;
  font-weight: bold;
  font-size: 16px;
}
.translations-wrapper .add-new-form-section .form-box .default-langauge-section .add-new-bottom {
  border-left: 1px solid #ddd;
}
.translations-wrapper .add-new-form-section .form-box .default-langauge-section .add-new-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.translations-wrapper .add-new-form-section .form-box .default-langauge-section .add-new-top .status-side i {
  margin-right: 10px;
  font-size: 16px;
}
@media screen and (max-width: 550px) {
  .translations-wrapper .add-new-form-section .form-box {
    grid-template-columns: 100%;
  }
  .translations-wrapper .add-new-form-section .form-box .default-langauge-section {
    border-bottom: 1px solid var(--main-color);
  }
  .translations-wrapper .add-new-form-section .form-box .default-langauge-section .add-new-bottom {
    border-right: 0;
  }
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side .add-new-top {
  position: relative;
  padding: 10px 5%;
  min-height: 67px;
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side .add-new-top:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: var(--main-color);
  width: 100%;
  height: 100%;
  opacity: 0.2;
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side .add-new-top p {
  margin-bottom: 0;
  line-height: 14px;
  font-weight: bold;
  font-size: 12px;
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side .add-new-top h4 {
  color: #444;
  margin: 0;
  padding: 0;
  font-size: 1.3em !important;
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side.translation-langauge-section .add-new-top {
  padding: 10px calc(4% - 15px);
  display: flex;
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side.translation-langauge-section .add-new-top button {
  height: 45px;
  border-radius: 25px;
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side.translation-langauge-section .add-new-top .select {
  max-width: 225px;
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side .add-new-bottom {
  min-height: 145px;
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side .add-new-bottom input {
  min-height: 90px;
  width: 100%;
  padding: 10px 5%;
  border: 0;
  font-size: 1.5em;
  background: #fff;
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side .add-new-bottom input.input-error::-webkit-input-placeholder {
  color: #e5301c;
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side .add-new-bottom .add-new-translation-btn-wrapper {
  display: flex;
  justify-content: flex-end;
}
.translations-wrapper .add-new-form-section .form-box .add-new-form-side .add-new-bottom #add-new-translation-btn {
  width: auto;
  min-width: 130px;
  margin: 0 4% 10px;
  width: 30%;
}
.translations-wrapper .added-translations-list,
.translations-wrapper .nonSyncedTranslationWrapper {
  margin-top: 30px;
}
.translations-wrapper .added-translations-list.serach-result-list,
.translations-wrapper .nonSyncedTranslationWrapper.serach-result-list {
  margin-top: 0;
  background: #fff;
  padding: 10px;
}
.translations-wrapper .added-translations-list input[type=checkbox],
.translations-wrapper .nonSyncedTranslationWrapper input[type=checkbox] {
  width: 14px;
}
.translations-wrapper .added-translations-list input[type=checkbox]:before,
.translations-wrapper .nonSyncedTranslationWrapper input[type=checkbox]:before {
  top: 0;
  width: 18px;
  height: 18px;
  background: #fafafa;
  border-color: #aeaeae;
  overflow: hidden;
  font-size: 21px !important;
  border-radius: 50%;
}
.translations-wrapper .added-translations-list .items-list .item_,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ {
  background: #fff;
  display: grid;
  grid-template-columns: 30px 20% 20% 20% 20% calc(20% - 30px);
  border: 1px solid #ddd;
  border-bottom: 0;
}
.translations-wrapper .added-translations-list .items-list .item_.selected,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_.selected {
  background: rgba(var(--main-color-rgb), 0.3);
}
.translations-wrapper .added-translations-list .items-list .item_:last-child,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_:last-child {
  border-bottom: 1px solid #ddd;
}
.translations-wrapper .added-translations-list .items-list .item_ > div,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ > div {
  padding: 10px 5%;
}
.translations-wrapper .added-translations-list .items-list .item_ .transaltion_,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ .transaltion_ {
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.translations-wrapper .added-translations-list .items-list .item_ h4,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ h4 {
  margin-top: 0;
  word-break: break-all;
}
.translations-wrapper .added-translations-list .items-list .item_ .item-actions,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ .item-actions {
  font-size: 1.5em;
  display: flex;
  /*width: 50px;*/
  justify-content: space-between;
  align-items: center;
}
.translations-wrapper .added-translations-list .items-list .item_ .item-actions span,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ .item-actions span {
  margin: 5px 7px;
  color: #aeaeae;
  cursor: pointer;
}
.translations-wrapper .added-translations-list .items-list .item_ .item-actions.active span,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ .item-actions.active span {
  color: var(--main-color);
}
.translations-wrapper .added-translations-list .items-list .item_ .item-actions .delete_,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ .item-actions .delete_ {
  color: #e5301c !important;
}
@media screen and (max-width: 700px) {
  .translations-wrapper .added-translations-list .items-list .item_ .item-actions,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ .item-actions {
    justify-content: space-around;
    flex-direction: column;
  }
}
.translations-wrapper .added-translations-list .items-list .item_ .user-added,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ .user-added {
  display: flex;
  justify-content: space-between;
}
.translations-wrapper .added-translations-list .items-list .item_ .select-item-input,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ .select-item-input {
  text-align: center;
}
.translations-wrapper .added-translations-list .items-list .item_ .select-item-input input[type=checkbox]:before,
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ .select-item-input input[type=checkbox]:before {
  background: #fff;
}
.translations-wrapper .added-translations-list .items-list.items-list-will-edit .item_,
.translations-wrapper .nonSyncedTranslationWrapper .items-list.items-list-will-edit .item_ {
  grid-template-columns: 40px calc(50% - 20px) calc(50% - 20px);
}
.translations-wrapper .added-translations-list .items-list.items-list-will-edit .item_ .transaltion_,
.translations-wrapper .nonSyncedTranslationWrapper .items-list.items-list-will-edit .item_ .transaltion_ {
  border-left: 1px solid #ddd;
  border-right: 0;
}
.translations-wrapper .added-translations-list .items-list.items-list-will-edit .item_ .item-list-will-edit,
.translations-wrapper .nonSyncedTranslationWrapper .items-list.items-list-will-edit .item_ .item-list-will-edit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.translations-wrapper .added-translations-list .items-list.items-list-will-edit .item_ .item-list-will-edit i,
.translations-wrapper .nonSyncedTranslationWrapper .items-list.items-list-will-edit .item_ .item-list-will-edit i {
  cursor: pointer;
  color: #aeaeae;
  padding: 10px;
  font-size: 15px;
}
.translations-wrapper .added-translations-list .items-actions-box,
.translations-wrapper .nonSyncedTranslationWrapper .items-actions-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.translations-wrapper .added-translations-list .items-actions-box .actions-side,
.translations-wrapper .nonSyncedTranslationWrapper .items-actions-box .actions-side {
  display: flex;
  align-items: center;
}
.translations-wrapper .added-translations-list .items-actions-box .actions-side .action_,
.translations-wrapper .nonSyncedTranslationWrapper .items-actions-box .actions-side .action_ {
  display: flex;
  align-items: center;
  margin-left: 15px;
  cursor: pointer;
}
.translations-wrapper .added-translations-list .items-actions-box .actions-side .action_ label,
.translations-wrapper .nonSyncedTranslationWrapper .items-actions-box .actions-side .action_ label {
  margin-bottom: 0;
}
.translations-wrapper .added-translations-list .items-actions-box .actions-side .action_ input,
.translations-wrapper .added-translations-list .items-actions-box .actions-side .action_ i,
.translations-wrapper .nonSyncedTranslationWrapper .items-actions-box .actions-side .action_ input,
.translations-wrapper .nonSyncedTranslationWrapper .items-actions-box .actions-side .action_ i {
  margin-left: 10px;
  color: #aeaeae;
}
.translations-wrapper .added-translations-list .items-actions-box .actions-side .action_ i,
.translations-wrapper .nonSyncedTranslationWrapper .items-actions-box .actions-side .action_ i {
  font-size: 18px;
}
.translations-wrapper .rigth-side-input-wrapper {
  position: relative;
}
.translations-wrapper .rigth-side-input-wrapper i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6em;
  color: #e5301c;
  cursor: pointer;
}
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ {
  grid-template-columns: 30px 25% 25% 25% calc(25% - 100px) 70px;
}
.translations-wrapper .nonSyncedTranslationWrapper .items-list .item_ .user-added {
  border-left: 1px solid #ddd;
}
.translations-wrapper .translations-section-label {
  margin-bottom: 0;
  color: #aeaeae;
}
.translations-wrapper .add-new-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.translations-wrapper .add-new-form-actions .translations-btn-style {
  max-width: 150px;
  border: 0;
  margin: 0 10px;
}
.translations-wrapper .add-new-form-actions .translations-btn-style.reset {
  background: #aeaeae !important;
  color: #fff;
}
.translations-wrapper .add-new-form-actions .translations-btn-style.save {
  background: var(--main-color) !important;
  color: #fff;
}
.translations-wrapper .error-message {
  color: #e5301c;
}
.translations-wrapper .added-translations-list-footer {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0;
}
.translations-wrapper .added-translations-list-footer li {
  margin: 10px;
  color: #aeaeae;
}
.translations-wrapper .added-translations-list-footer li.prev__, .translations-wrapper .added-translations-list-footer li.next__ {
  font-size: 1.5em;
}
.translations-wrapper .added-translations-list-footer li.active {
  color: var(--main-color);
}
.translations-wrapper .translation-nav-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.translations-wrapper .translation-nav-tabs li {
  list-style: none;
  padding: 10px 20px;
}
.translations-wrapper .translation-nav-tabs li a {
  color: #aeaeae;
  text-decoration: none !important;
  font-size: 15px;
}
.translations-wrapper .translation-nav-tabs li.active {
  border-bottom: 3px solid var(--main-color);
}
.translations-wrapper .translation-nav-tabs li.active a {
  color: #444;
}
.translations-wrapper .tab-content {
  box-shadow: none;
  background: transparent;
  padding: 20px 0 0;
}
.translations-wrapper #addNewTranslationTab .added-translations-list {
  display: none;
}
.translations-wrapper #addNewTranslationTab.searchStatus .added-translations-list {
  display: block;
}
.translations-wrapper #addNewTranslationTab.searchStatus .add-new-bottom {
  display: none !important;
}

.status-icon {
  display: flex;
  justify-content: center;
}

#searchButton {
  margin-right: 5px;
}

#addNewTranslation .item_ {
  grid-template-columns: 30px 33% 32% calc(35% - 160px) 130px;
}
#addNewTranslation .item_ .user-added {
  border-right: 1px solid #ddd;
}
#addNewTranslation .item_ .user-info_ {
  text-align: center;
}

.wrapper-bubbles-background, .cubes-wrapper {
  display: none;
}

html[data-school-bg=school_background_1] .cubes-wrapper {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  display: block;
}
html[data-school-bg=school_background_1] .cube {
  position: absolute;
  top: 80vh;
  left: 45vw;
  width: 10px;
  height: 10px;
  border: solid 1px var(--main-color);
  filter: contrast(0.7);
  transform-origin: top left;
  transform: scale(0) rotate(0deg) translate(-50%, -50%);
  animation: cube 12s ease-in forwards infinite;
}
html[data-school-bg=school_background_1] .cube:nth-child(2n) {
  filter: contrast(1) brightness(1.2);
}
html[data-school-bg=school_background_1] .cube:nth-child(2) {
  animation-delay: 2s;
  left: 25vw;
  top: 40vh;
}
html[data-school-bg=school_background_1] .cube:nth-child(3) {
  animation-delay: 4s;
  left: 75vw;
  top: 50vh;
}
html[data-school-bg=school_background_1] .cube:nth-child(4) {
  animation-delay: 6s;
  left: 90vw;
  top: 10vh;
}
html[data-school-bg=school_background_1] .cube:nth-child(5) {
  animation-delay: 8s;
  left: 10vw;
  top: 85vh;
}
html[data-school-bg=school_background_1] .cube:nth-child(6) {
  animation-delay: 10s;
  left: 50vw;
  top: 10vh;
}
html[data-school-bg=school_background_1] .cube:nth-child(7) {
  animation-delay: 10s;
  left: 0;
  top: 10vh;
}
@keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}

html[data-school-bg=school_background_2] .wrapper-bubbles-background {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin-top: -200px;
  overflow: hidden;
  display: block;
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(var(--main-color-rgb), 0.15);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  border-radius: 5px;
  filter: brightness(0.6);
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles li:nth-child(1) {
  left: 10%;
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 17s;
  animation-duration: 17s;
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
  animation-duration: 22s;
  background-color: rgba(var(--main-color-rgb), 0.25);
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles li:nth-child(5) {
  left: 70%;
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  background-color: rgba(var(--main-color-rgb), 0.2);
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
  animation-delay: 7s;
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  background-color: rgba(var(--main-color-rgb), 0.3);
}
html[data-school-bg=school_background_2] .wrapper-bubbles-background .bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
  animation-delay: 11s;
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
    transform: translateY(-700px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
    transform: translateY(-700px) rotate(600deg);
  }
}

html[data-school-bg=school_background_3] body:after {
  content: "";
  background-image: url("/img/school_settings/cloud-bg-2.jpg");
  -webkit-animation: slidein 100s;
  animation: slidein 100s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.1;
  background-attachment: fixed;
}
html[data-school-bg=school_background_3] body:before {
  height: 100%;
}

html[data-school-bg=school_background_5] body:after {
  content: "";
  background-image: url("/img/school_settings/math-bg.png");
  -webkit-animation: slidein 100s;
  animation: slidein 100s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.2;
  background-size: contain !important;
  background-attachment: fixed;
}
html[data-school-bg=school_background_5] body:before {
  opacity: 0.8;
  height: 100%;
}

@-webkit-keyframes slidein {
  from {
    background-position: top;
    background-size: 3000px;
  }
  to {
    background-position: -100px 0px;
    background-size: 2750px;
  }
}
@keyframes slidein {
  from {
    background-position: top;
    background-size: 3000px;
  }
  to {
    background-position: -100px 0px;
    background-size: 2750px;
  }
}
html[data-school-bg=school_background_4] body:before {
  height: 80%;
}

.notification_center_and_user_info_wrapper {
  color: #fff;
  margin: 0 -10px;
}
@media (min-width: 1200px) {
  .notification_center_and_user_info_wrapper {
    display: flex;
  }
}
.notification_center_and_user_info_wrapper .notification_center_box {
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.15) !important;
  padding: 0 5px 10px;
}
@media (min-width: 1200px) {
  .notification_center_and_user_info_wrapper .notification_center_box {
    height: 100%;
  }
}
.notification_center_and_user_info_wrapper .notification_center_box.badge_wlc_wrapper:not(.without-img-bg) {
  background: url(/img/homepage-icon/notification_center_bg.png) no-repeat top center;
}
@media (min-width: 750px) {
  .notification_center_and_user_info_wrapper .notification_center_box.badge_wlc_wrapper {
    background-size: contain;
  }
}
.notification_center_and_user_info_wrapper .notification_center_box.badge_wlc_wrapper > .flex {
  max-width: 100%;
}
@media (max-width: 750px) {
  .notification_center_and_user_info_wrapper .notification_center_box {
    display: block;
  }
}
.notification_center_and_user_info_wrapper .datetime-wrapper {
  padding: 0 15px;
  padding-right: 10px;
  max-width: 100%;
}
.notification_center_and_user_info_wrapper #dateTime {
  font-weight: 300;
}
.notification_center_and_user_info_wrapper #dateTime span {
  opacity: 0.8;
}
.notification_center_and_user_info_wrapper #dateTime i {
  font-size: 16px;
  margin-left: 10px;
  font-style: normal;
}
.notification_center_and_user_info_wrapper #dateTime i:before {
  color: rgba(255, 255, 255, 0.8);
}
.notification_center_and_user_info_wrapper .wlc-section {
  padding-right: 20px;
  text-transform: uppercase;
  max-width: 100%;
  overflow: hidden;
}
.notification_center_and_user_info_wrapper .wlc-section h1 {
  font-size: 40px !important;
}
@media (max-width: 550px) {
  .notification_center_and_user_info_wrapper .wlc-section {
    padding-right: 0;
  }
  .notification_center_and_user_info_wrapper .wlc-section h1 {
    font-size: 30px;
  }
}
.notification_center_and_user_info_wrapper .notification_center_label {
  text-transform: uppercase;
  text-align: center;
}
.notification_center_and_user_info_wrapper .separator_line {
  color: var(--main-color);
  margin: 0 10px;
  display: flex;
  gap: 1rem;
  min-height: 18px;
}
.notification_center_and_user_info_wrapper .separator_line:before {
  content: "";
  border: 0.1px solid rgba(var(--main-color-rgb), 0.3);
}
@media screen and (max-width: 1050px) {
  .notification_center_and_user_info_wrapper .separator_line.for-select-school {
    display: none;
  }
}
.notification_center_and_user_info_wrapper .badge-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: min-content;
}
.notification_center_and_user_info_wrapper .badge-wrapper .score_progress_element {
  position: relative;
  height: 80px;
  width: 80px;
  margin-top: 10px;
}
.notification_center_and_user_info_wrapper .badge-wrapper .score_progress_element [data-role=radial-progress] {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  --progress-percent: 0;
  --progress-bar-width: 100%;
  transform: rotate(-90deg);
  border-radius: 50%;
}
.notification_center_and_user_info_wrapper .badge-wrapper .score_progress_element [data-role=radial-progress] > circle.value {
  stroke-width: var(--progress-bar-width);
  stroke-dasharray: 314.1592%;
  stroke-dashoffset: calc(100% * (100 - var(--progress-percent)) / 100 * 3.141592);
  transition: stroke-dashoffset 6s linear;
}
.notification_center_and_user_info_wrapper .badge-wrapper .score_progress_element [data-role=radial-progress] > circle.circle_empty {
  stroke-width: var(--progress-bar-width);
  stroke-dasharray: 0;
  stroke-dashoffset: 100%;
  stroke: rgba(0, 0, 0, 0.1);
}
.notification_center_and_user_info_wrapper .badge-wrapper .icon-badge-icon {
  width: 50px;
  margin-top: 10px;
  font-size: 6em;
}
.notification_center_and_user_info_wrapper .badge-wrapper .score_section {
  margin-right: 20px;
}
.notification_center_and_user_info_wrapper .badge-wrapper .separator_line {
  max-height: 80%;
  margin: 30px 10px 0;
}
.notification_center_and_user_info_wrapper .badge-wrapper #scoreBar img, .notification_center_and_user_info_wrapper .badge-wrapper #scoreBar #label {
  display: none !important;
}
@media (min-width: 750px) {
  .notification_center_and_user_info_wrapper .badge-wrapper {
    max-width: 60%;
  }
  .notification_center_and_user_info_wrapper .badge-wrapper .icon-badge-icon {
    width: 50px;
  }
  .notification_center_and_user_info_wrapper .badge-wrapper .score_progress_element {
    width: 80px;
    margin-top: 40px;
  }
  .notification_center_and_user_info_wrapper .badge-wrapper h1, .notification_center_and_user_info_wrapper .badge-wrapper #score a {
    font-size: 40px !important;
    margin-top: 40px;
    font-weight: bold;
  }
}
.notification_center_and_user_info_wrapper .badge-wrapper .score-progress, .notification_center_and_user_info_wrapper .badge-wrapper .badge-icon {
  margin-left: 30px;
}
@media (max-width: 750px) {
  .notification_center_and_user_info_wrapper .badge-wrapper {
    margin-top: 40px;
    padding: 0 !important;
  }
  .notification_center_and_user_info_wrapper .badge-wrapper .icon-badge-icon {
    margin-top: -15px;
  }
  .notification_center_and_user_info_wrapper .badge-wrapper .score-progress, .notification_center_and_user_info_wrapper .badge-wrapper .badge-icon {
    margin-left: 10px;
  }
}
@media (max-width: 500px) {
  .notification_center_and_user_info_wrapper .badge-wrapper .score-progress, .notification_center_and_user_info_wrapper .badge-wrapper .badge-icon {
    margin-left: 10px;
  }
  .notification_center_and_user_info_wrapper .badge-wrapper .badge_section h1, .notification_center_and_user_info_wrapper .badge-wrapper .score_section h1 {
    font-size: 16px;
  }
  .notification_center_and_user_info_wrapper .badge-wrapper .badge_section .icon-badge-icon, .notification_center_and_user_info_wrapper .badge-wrapper .score_section .icon-badge-icon {
    width: 30px;
    margin-top: -30px;
  }
  .notification_center_and_user_info_wrapper .badge-wrapper .badge_section .score_progress_element, .notification_center_and_user_info_wrapper .badge-wrapper .score_section .score_progress_element {
    width: 30px;
    margin-top: 33px;
  }
  .notification_center_and_user_info_wrapper .badge-wrapper .badge_section .score_progress_element, .notification_center_and_user_info_wrapper .badge-wrapper .score_section .score_progress_element {
    height: 30px;
  }
}
.notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 10px;
}
.notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box.teacher_ {
  margin-top: 40px;
}
.notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_item_line {
  grid-column: 1/4;
  margin: 5px 10px;
  border-top: 1px solid rgba(var(--main-color-rgb), 0.3);
  display: none;
}
.notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box {
  padding: 5px;
}
.notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  padding: 5px;
  height: 55px;
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item {
    padding: 1px;
  }
}
.notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item i {
  font-size: 30px;
  margin: 10px;
  width: 25px;
}
@media (max-width: 1450px) {
  .notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item i {
    font-size: 20px;
  }
}
@media (min-width: 1200px) {
  .notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item i {
    margin: 7px;
  }
}
@media (max-width: 420px) {
  .notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item i {
    margin: 5px;
  }
}
.notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item i.icon-video3:before {
  color: #5027e3;
  font-weight: bold;
}
.notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item i.icon-megaphone {
  color: #00e2d0;
}
.notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item h1 {
  margin: 10px;
}
@media (max-width: 1450px) {
  .notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item h1 {
    font-size: 20px;
  }
}
@media (min-width: 1200px) {
  .notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item h1 {
    margin: 7px;
  }
}
@media (max-width: 420px) {
  .notification_center_and_user_info_wrapper .notification_center_box .items_wrapper_of_notification_center_box .notifications_box .notifications_item h1 {
    margin: 5px;
    font-size: 20px;
  }
}
.notification_center_and_user_info_wrapper .notification_items_wrapper i.icon-notifications {
  margin-left: 10px;
  font-size: 16px;
}
.notification_center_and_user_info_wrapper .notification_items_wrapper i.icon-notifications:before {
  color: rgba(255, 255, 255, 0.7);
}
.notification_center_and_user_info_wrapper .notification_items_wrapper .notification_center_label {
  padding-top: 15px;
}
.notification_center_and_user_info_wrapper .notification-center-schools-filter {
  padding: 0 10px;
  max-width: 50%;
}
@media screen and (max-width: 1050px) {
  .notification_center_and_user_info_wrapper .notification-center-schools-filter {
    width: 100%;
    max-width: 100%;
    flex: unset;
  }
}
.notification_center_and_user_info_wrapper .notification-center-schools-filter .icon {
  margin-left: 10px;
}
.notification_center_and_user_info_wrapper .notification-center-schools-filter .icon:before {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
}
.notification_center_and_user_info_wrapper .notification-center-schools-filter .selected-schools {
  background: transparent;
  color: #fff;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notification_center_and_user_info_wrapper .notification-center-schools-filter .selected-schools:after {
  display: none;
}

.notification_center_side_popup_wrapper {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
}
.notification_center_side_popup_wrapper.opened {
  display: block;
}
.notification_center_side_popup_wrapper .notification_center_side_popup_mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 0;
}
.notification_center_side_popup_wrapper .side_popup_content {
  background: #fff;
  position: absolute;
  top: 5%;
  left: 0;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  width: 30%;
  min-width: 300px;
  height: 95%;
  padding: 20px;
  overflow-y: auto;
  z-index: 1;
}
.notification_center_side_popup_wrapper .notification_side_popup_close_section {
  text-align: left;
  margin-bottom: 20px;
  font-size: 18px;
  opacity: 1;
  color: #444;
}
.notification_center_side_popup_wrapper .notification_center_sections_list .no_new_notifications_notice {
  position: relative;
  top: unset;
}
.notification_center_side_popup_wrapper .notification_center_sections_list li {
  list-style: none;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li {
  margin-bottom: 20px;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .head_of_notification_item {
  padding: 20px 15px;
  background: #fef7e2;
  border-radius: 10px;
  color: #212121;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .head_of_notification_item .title_part h4 {
  text-transform: uppercase;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .head_of_notification_item .title_part i {
  margin-left: 15px;
  font-size: 16px;
  width: 20px;
  height: auto;
  -webkit-filter: brightness(0);
  filter: brightness(0);
  opacity: 0.7;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .head_of_notification_item .count_part i {
  margin-right: 15px;
  font-size: 20px;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .head_of_notification_item .count_part span {
  font-weight: bold;
  font-size: 14px;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li.announcements_box .head_of_notification_item {
  background: #e4fbf8;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li.videos_box .head_of_notification_item {
  background: #e9e4fa;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li.videos_box .head_of_notification_item .icon-video3 {
  font-weight: bold;
  color: #5027e3;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li.messages_box .head_of_notification_item {
  background: #eafbe3;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li.exams_box .head_of_notification_item {
  background: #fbfbe4;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item {
  display: none;
  padding: 15px;
  border-top: 1px solid #eee;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item .no_result {
  text-align: center;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item .show-all, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item .show-details {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item .show-all a, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item .show-all button, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item .show-details a, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item .show-details button {
  border: 1px solid var(--main-color);
  color: var(--main-color) !important;
  text-decoration: unset;
  padding: 7px 15px;
  font-weight: bold;
  border-radius: 25px;
  margin: 0 5px;
  text-wrap: nowrap;
  text-align: center;
  background: transparent !important;
  outline: 0;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data li {
  padding: 10px 0;
  margin-bottom: 10px;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data li:not(.no_result, .show-all-wrapper) {
  border-bottom: 1px solid #eee;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data li img:not(.course-icon) {
  max-width: 100%;
  max-height: 225px;
  object-fit: contain;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data li .course-icon {
  object-fit: contain;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-left: 15px;
  margin-top: 5px;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data li p {
  opacity: 0.7;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.messages_notification li.seen, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.notification_student li.seen {
  opacity: 0.6;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.messages_notification li a, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.notification_student li a {
  display: flex;
  text-decoration: unset;
  align-items: flex-start;
  color: #444;
  justify-content: space-between;
  width: 100%;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.messages_notification li .notification-subject, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.notification_student li .notification-subject {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  margin-top: 5px;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.messages_notification li img, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.notification_student li img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid #eee;
  border-radius: 50%;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.messages_notification li .notification_type, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.notification_student li .notification_type {
  width: 40px;
  height: 40px;
  font-size: 24px;
  text-align: center;
  color: var(--main-color);
  opacity: 0.7;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.messages_notification li .notifaction-body, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.notification_student li .notifaction-body {
  color: #444;
  opacity: 0.7;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.messages_notification li .notification, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.notification_student li .notification {
  display: flex;
  flex-direction: column;
  margin: 0 15px;
  flex: 1;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.messages_notification li .notification-time, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.notification_student li .notification-time {
  margin-top: 20px;
  opacity: 0.7;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.messages_notification li.notification-with-avatar .notification_type, .notification_center_side_popup_wrapper .notification_center_sections_list > li .body_of_notification_item \  .center_list_of_data.notification_student li.notification-with-avatar .notification_type {
  display: none;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li.opened .head_of_notification_item {
  background: transparent;
  color: #444;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li.opened .head_of_notification_item .title_part i, .notification_center_side_popup_wrapper .notification_center_sections_list > li.opened .head_of_notification_item .title_part img {
  -webkit-filter: unset;
  filter: unset;
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li.opened .head_of_notification_item .count_part i {
  transform: rotate(180deg);
}
.notification_center_side_popup_wrapper .notification_center_sections_list > li.opened .body_of_notification_item {
  display: block;
}

.flex {
  display: flex;
}
.flex.inline-flex {
  display: inline-flex;
}
.flex.padding-10 {
  padding: 10px;
}
.flex.padding-15 {
  padding: 15px;
}
.flex.padding-20 {
  padding: 20px;
}
.flex.padding-10-h {
  padding: 0 10px;
}
.flex.padding-15-h {
  padding: 0 15px;
}
.flex.padding-20-h {
  padding: 0 20px;
}
.flex.items-center {
  align-items: center;
}
.flex.items-top {
  align-items: flex-start;
}
.flex.items-bottom {
  align-items: flex-end;
}
.flex.justify-center {
  justify-content: center;
}
.flex.justify-end {
  justify-content: flex-end;
}
.flex.justify-start {
  justify-content: flex-start;
}
.flex.flex-direction-column {
  flex-direction: column;
}
.flex.flex-wrap {
  flex-wrap: wrap;
}
.flex.justify-space-between {
  justify-content: space-between;
}
.flex.justify-space-around {
  justify-content: space-around;
}
.flex.flex-1 {
  flex: 1;
}
.flex .flex-1 {
  flex: 1;
}

.white-bg {
  background: #fff;
}

.border-radius-4 {
  border-radius: 4px;
}

.border-radius-5 {
  border-radius: 5px;
}

.border-radius-6 {
  border-radius: 6px;
}

.border-radius-7 {
  border-radius: 7px;
}

.border-radius-8 {
  border-radius: 8px;
}

.border-radius-9 {
  border-radius: 9px;
}

.border-radius-10 {
  border-radius: 10px;
}

.border-radius-11 {
  border-radius: 11px;
}

.border-radius-12 {
  border-radius: 12px;
}

.border-radius-13 {
  border-radius: 13px;
}

.border-radius-14 {
  border-radius: 14px;
}

.border-radius-15 {
  border-radius: 15px;
}

.border-radius-16 {
  border-radius: 16px;
}

.border-radius-17 {
  border-radius: 17px;
}

.border-radius-18 {
  border-radius: 18px;
}

.border-radius-19 {
  border-radius: 19px;
}

.border-radius-20 {
  border-radius: 20px;
}

.border-radius-21 {
  border-radius: 21px;
}

.border-radius-22 {
  border-radius: 22px;
}

.border-radius-23 {
  border-radius: 23px;
}

.border-radius-24 {
  border-radius: 24px;
}

.border-radius-25 {
  border-radius: 25px;
}

.courses_list_for_student_dashboard #courses_list_container {
  margin: 0 -10px;
}
.courses_list_for_student_dashboard .courses_title {
  display: flex;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 30px;
}
.courses_list_for_student_dashboard .courses_title_logo {
  width: 55px;
  height: 55px;
  background-color: #00CDF4;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.courses_list_for_student_dashboard .courses_title_logo > svg {
  width: 35px;
  height: 35px;
  margin: auto;
}
.courses_list_for_student_dashboard .courses_title p {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  margin: auto 0;
  margin-right: 20px;
}
.courses_list_for_student_dashboard .courses_title_botton {
  margin-right: auto;
  height: 22px;
  width: auto;
}
.courses_list_for_student_dashboard .courses_item {
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 20px 0;
  max-width: 511px;
  text-decoration: none;
  color: #444;
  border: 1px solid #eee;
}
@media (max-width: 990px) {
  .courses_list_for_student_dashboard .courses_item {
    max-width: 100%;
  }
}
.courses_list_for_student_dashboard .courses_item_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 90px;
  position: relative;
  top: 10px;
}
@media (max-width: 450px) {
  .courses_list_for_student_dashboard .courses_item_box {
    height: auto;
  }
}
.courses_list_for_student_dashboard .courses_item_box_warningOutOfTime {
  display: flex;
  align-items: center;
  width: 117%;
  left: 20px;
  height: 40%;
  background-color: rgba(247, 202, 13, 0.25);
  color: #444;
  border-radius: 20px;
  position: relative;
}
.courses_list_for_student_dashboard .courses_item_box_warningOutOfTime_icon {
  margin-left: 10px;
  margin-right: 16px;
  color: #444;
}
.courses_list_for_student_dashboard .courses_item_box_warningOutOfTime_text {
  margin: 0px;
  font-weight: 600;
  color: #444;
}
.courses_list_for_student_dashboard .courses_item_box_warningOutOfTime_text_res {
  font-weight: 600;
}
@media only screen and (max-width: 600px) {
  .courses_list_for_student_dashboard .courses_item_box_warningOutOfTime_text_res {
    margin: 0px;
    font-weight: 600;
    display: block;
    text-align: center;
  }
}
.courses_list_for_student_dashboard .courses_item_box_ratio {
  display: flex;
  align-items: center;
  width: 104%;
}
.courses_list_for_student_dashboard .courses_item_box_name {
  margin: auto;
  margin-right: 0;
  margin-bottom: 0px;
  height: 3em;
  overflow: hidden;
  display: flex;
}
.courses_list_for_student_dashboard .courses_item_box_name_inactive {
  color: #aeaeae;
  margin-bottom: 0px !important;
  margin: auto;
  margin-right: 0px;
  height: 3em;
  overflow: hidden;
  display: flex;
}
.courses_list_for_student_dashboard .courses_item_logo {
  width: 90px;
  min-width: 90px;
  height: 90px;
  min-height: 90px;
  border-radius: 50%;
  margin-right: 30px;
  margin-left: 20px;
}
@media (max-width: 450px) {
  .courses_list_for_student_dashboard .courses_item_logo {
    width: 65px;
    min-width: 65px;
    height: 65px;
    min-height: 65px;
    margin-right: 15px;
  }
}
.courses_list_for_student_dashboard .courses_item_name {
  font-size: 16px;
  font-weight: 600;
  margin: auto;
  margin-bottom: auto !important;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}
@media (max-width: 450px) {
  .courses_list_for_student_dashboard .courses_item_name {
    font-size: 14px;
  }
}
.courses_list_for_student_dashboard .courses_item_ratio {
  margin-left: 20px;
  font-size: 16px;
  font-weight: 300;
  opacity: 0.7;
}
@media (max-width: 450px) {
  .courses_list_for_student_dashboard .courses_item_ratio {
    font-size: 16px;
    margin-left: 7px;
  }
}
.courses_list_for_student_dashboard .courses_item_ratio_bar {
  margin-left: 5px;
  width: 100%;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 7px;
}
.courses_list_for_student_dashboard .courses_item_ratio_bar_value {
  height: 4px;
  width: var(--value);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, var(--main-color) 100%);
  border-radius: 7px;
}
.courses_list_for_student_dashboard .courses_item > i {
  font-size: 2em;
  margin-left: 10px;
  color: #ddd;
}
@media (max-width: 450px) {
  .courses_list_for_student_dashboard .courses_item > i {
    font-size: 1.5em;
  }
}
@media only screen and (max-width: 600px) {
  .courses_list_for_student_dashboard .courses_item_box_warningOutOfTime_text_res {
    margin: 0px;
    font-weight: 600;
    display: block;
    text-align: center;
  }
}

@media only screen and (max-width: 990px) {
  .courses_item_box_warningOutOfTime {
    width: 327px !important;
  }
}
@media only screen and (max-width: 450px) {
  .courses_item_box_warningOutOfTime {
    width: 117% !important;
  }
}
.discussion_rooms_list_for_student_dashboard .item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 30px 20px;
  border-radius: 20px;
  height: 230px;
  border: 1px solid #eee;
  text-decoration: none;
}
.discussion_rooms_list_for_student_dashboard .item:hover {
  opacity: 0.9;
}
@media (max-width: 450px) {
  .discussion_rooms_list_for_student_dashboard .item {
    padding: 23px 15px;
    height: 230px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .discussion_rooms_list_for_student_dashboard .item {
    margin: 0 10%;
  }
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_material {
  display: flex;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_material_logo {
  width: 58px;
  height: 58px;
  background: color-mix(in srgb, var(--color) 25%, transparent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  margin-left: 15px;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_material_logo > svg, .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_material_logo > img {
  width: 33px;
  height: 33px;
  margin: auto;
}
@media (max-width: 450px) {
  .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_material_logo {
    width: 45px;
    height: 45px;
    margin-left: 10px;
  }
  .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_material_logo > svg, .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_material_logo > img {
    width: 25px;
    height: 25px;
    margin: auto;
  }
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_item_title {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  margin: auto 0;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_item_title_box {
  display: flex;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_item_text {
  font-size: 16px;
  color: #777;
  margin: 0;
  -webkit-line-clamp: 2;
  max-height: 4rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_item_text_box {
  display: flex;
  flex-direction: column;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_item_date {
  margin: 7px 0 0;
  font-size: 14px;
  opacity: 0.9;
}
@media (max-width: 450px) {
  .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_item_title {
    font-size: 16px;
    line-height: 25px;
  }
  .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_item_text {
    font-size: 14px;
  }
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer {
  display: flex;
  align-items: center;
  margin-top: auto;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer .date {
  font-size: 13px;
  font-weight: 200;
  display: flex;
  color: black;
  align-items: center;
  margin-right: 2%;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer .date > svg {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  stroke: #004F6E;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer .date > svg line, .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer .date > svg rect {
  stroke: #004F6E;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer .date > i {
  margin-left: 10px;
  stroke: #004F6E;
  font-size: 1.7em;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer .date > p {
  font-size: 15px;
  font-weight: 300;
  margin: auto;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer_rate {
  display: flex;
  align-items: start;
  margin-right: auto;
  margin-left: 8%;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer_rate > svg {
  width: 30px;
  height: 30px;
  margin-left: 10px;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer_rate > p {
  font-size: 17px;
  font-weight: 400;
  margin: auto;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer_view {
  display: flex;
  align-items: start;
  margin-left: 5%;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer_view > svg {
  width: 25px;
  height: 25px;
  margin-left: 10px;
}
.discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer_view > p {
  font-size: 17px;
  font-weight: 400;
  margin: auto;
}
@media (max-width: 450px) {
  .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer .date {
    font-size: 10px;
  }
  .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer .date > svg {
    width: 22px;
    height: 22px;
    margin-right: 6px;
  }
  .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer .date > p {
    font-size: 15px;
  }
  .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer_rate > svg {
    width: 22px;
    height: 22px;
    margin-left: 6px;
  }
  .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer_rate > p {
    font-size: 13px;
  }
  .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer_view > svg {
    width: 25px;
    height: 25px;
    margin-left: 6px;
  }
  .discussion_rooms_list_for_student_dashboard .item .discussion_rooms_footer_view > p {
    font-size: 13px;
  }
}
.discussion_rooms_list_for_student_dashboard .last_item {
  background-color: transparent;
  display: flex;
  align-items: center;
}
.discussion_rooms_list_for_student_dashboard .last_item_box {
  border: 2px solid white;
  border-radius: 35px;
  padding: 10px 20px;
  width: max-content;
  margin: auto;
  font-size: 18px;
  color: #fff;
  display: flex;
}
.discussion_rooms_list_for_student_dashboard .last_item_box p {
  margin-bottom: 0;
  display: flex;
}
.discussion_rooms_list_for_student_dashboard .last_item_icon {
  margin-right: 5px;
  height: 30px;
  width: auto;
}
@media (max-width: 450px) {
  .discussion_rooms_list_for_student_dashboard .last_item_box {
    padding: 7px 15px;
  }
  .discussion_rooms_list_for_student_dashboard .last_item_icon {
    height: 22px;
  }
}
.discussion_rooms_list_for_student_dashboard .owl-carousel {
  height: 230px;
  position: relative;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-stage-outer {
  z-index: 10;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav {
  height: 230px;
  width: 100%;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav [class*=owl-]:hover {
  background: transparent;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-next {
  margin: 0;
  position: absolute;
  left: 0;
  z-index: 11;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-next .item_gradiant {
  height: 230px;
  width: 40px;
  background: linear-gradient(90deg, transparent 0%, #fafafa 100%);
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 20px;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-next .item_gradiant > i {
  font-size: 1.5em;
  background: #fff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--main-color);
  border: 1px solid var(--main-color);
  transition: all 0.1s linear;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-next .item_gradiant > i:hover {
  transform: scale(1.2);
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-prev {
  margin: 0;
  position: absolute;
  right: 0;
  z-index: 11;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-prev .item_gradiant {
  height: 230px;
  width: 40px;
  background: linear-gradient(90deg, #fafafa 0%, transparent 100%);
  position: relative;
  display: flex;
  align-items: center;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-prev .item_gradiant > i {
  font-size: 1.5em;
  background: #fff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--main-color);
  margin-right: 4px;
  border: 1px solid var(--main-color);
  transform: rotate(180deg);
  transition: all 0.1s linear;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-prev .item_gradiant > i:hover {
  transform: scale(-1.2);
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-dots {
  display: none;
}

.recommended_section_wrapper {
  margin: 0 -10px;
}

#carousel-recommended_to_watch {
  display: flex;
}
#carousel-recommended_to_watch .item-video {
  width: 100%;
  height: 100%;
}
#carousel-recommended_to_watch .items {
  position: absolute;
  top: 0;
  right: 0;
}
#carousel-recommended_to_watch .items div {
  float: none;
}
#carousel-recommended_to_watch .owl-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
#carousel-recommended_to_watch .owl-video-wrapper {
  width: 100%;
  border-radius: 10px;
}
#carousel-recommended_to_watch .owl-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-60%);
  pointer-events: none;
}
#carousel-recommended_to_watch .owl-dots.disabled, #carousel-recommended_to_watch .owl-nav.disabled {
  display: none !important;
}
#carousel-recommended_to_watch .owl-nav button.owl-prev {
  transform: translateX(-50%);
  pointer-events: auto;
}
#carousel-recommended_to_watch .owl-nav button.owl-prev > i {
  font-size: 2em;
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--main-color);
  margin-right: 4px;
  border: 1px solid var(--main-color);
  transform: scaleX(-1);
}
@media (max-width: 600px) {
  #carousel-recommended_to_watch .owl-nav button.owl-prev i {
    width: 40px;
    height: 40px;
  }
}
#carousel-recommended_to_watch .owl-nav button.owl-prev:hover {
  background: transparent;
}
#carousel-recommended_to_watch .owl-nav button.owl-next {
  transform: translateX(50%);
  pointer-events: auto;
}
#carousel-recommended_to_watch .owl-nav button.owl-next > i {
  font-size: 2em;
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--main-color);
  margin-right: 4px;
  border: 1px solid var(--main-color);
}
@media (max-width: 600px) {
  #carousel-recommended_to_watch .owl-nav button.owl-next i {
    width: 40px;
    height: 40px;
  }
}
#carousel-recommended_to_watch .owl-nav button.owl-next:hover {
  background: transparent;
}
#carousel-recommended_to_watch .item_box {
  height: 100%;
  width: 100%;
  position: relative;
}
#carousel-recommended_to_watch .item_box:hover .items, #carousel-recommended_to_watch .item_box.video_playing {
  display: none;
}
#carousel-recommended_to_watch .item_box .s3_video {
  width: 100%;
  height: 100%;
  background-color: #000000;
  border-radius: 10px;
}
#carousel-recommended_to_watch .item_box .s3_video_box {
  position: relative;
  width: 100%;
  height: 340px;
  margin: auto;
}
@media (max-width: 600px) {
  #carousel-recommended_to_watch .item_box .s3_video_box {
    height: 300px;
  }
}
@media (max-width: 450px) {
  #carousel-recommended_to_watch .item_box .s3_video_box {
    max-height: 100%;
  }
}
#carousel-recommended_to_watch .item_box .s3_video_box video {
  position: absolute;
  top: 0;
  width: 100% !important;
  border-radius: 10px;
}
@media (max-width: 450px) {
  #carousel-recommended_to_watch .item_box .s3_video_box video {
    max-height: 100%;
  }
}
#carousel-recommended_to_watch .item_box .s3_video_box .video-js.vjs-1-1:not(.vjs-audio-only-mode), #carousel-recommended_to_watch .item_box .s3_video_box .video-js.vjs-16-9:not(.vjs-audio-only-mode), #carousel-recommended_to_watch .item_box .s3_video_box .video-js.vjs-4-3:not(.vjs-audio-only-mode), #carousel-recommended_to_watch .item_box .s3_video_box .video-js.vjs-9-16:not(.vjs-audio-only-mode), #carousel-recommended_to_watch .item_box .s3_video_box .video-js.vjs-fluid:not(.vjs-audio-only-mode) {
  height: 100%;
  border-radius: 10px;
}
@media (max-width: 450px) {
  #carousel-recommended_to_watch .item_box .s3_video_box .video-js.vjs-1-1:not(.vjs-audio-only-mode), #carousel-recommended_to_watch .item_box .s3_video_box .video-js.vjs-16-9:not(.vjs-audio-only-mode), #carousel-recommended_to_watch .item_box .s3_video_box .video-js.vjs-4-3:not(.vjs-audio-only-mode), #carousel-recommended_to_watch .item_box .s3_video_box .video-js.vjs-9-16:not(.vjs-audio-only-mode), #carousel-recommended_to_watch .item_box .s3_video_box .video-js.vjs-fluid:not(.vjs-audio-only-mode) {
    max-height: 100%;
  }
}
#carousel-recommended_to_watch .item_box .s3_video_box .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  border-radius: 0 0 10px 10px;
}
#carousel-recommended_to_watch .item_box .s3_video_box .video-js .vjs-tech {
  width: 100%;
  height: 100% !important;
}
#carousel-recommended_to_watch .item_box .s3_video_box .vjs-has-started .vjs-control-bar {
  border-radius: 0 0 10px 10px;
}
#carousel-recommended_to_watch .item_box .s3_video_box > div {
  margin-top: 0 !important;
  border-radius: 10px;
}
#carousel-recommended_to_watch .item_box .vimeo_video, #carousel-recommended_to_watch .item_box .youtube_video {
  width: 100%;
  height: 340px;
  background-color: #000000;
  border-radius: 10px;
}
@media (max-width: 600px) {
  #carousel-recommended_to_watch .item_box .vimeo_video, #carousel-recommended_to_watch .item_box .youtube_video {
    height: 300px;
  }
}
#carousel-recommended_to_watch .item_box .vimeo_video > div, #carousel-recommended_to_watch .item_box .youtube_video > div {
  margin-top: 0 !important;
  height: 100%;
}
#carousel-recommended_to_watch .item_box .vimeo_video iframe, #carousel-recommended_to_watch .item_box .youtube_video iframe {
  height: 100%;
  width: 100%;
  border-radius: 10px;
}

@media (max-width: 800px) {
  .recommended_to_watch .carousel_box {
    width: 100% !important;
  }
}
.recommended_to_watch {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.recommended_to_watch .carousel_box {
  width: 83%;
  position: relative;
}
.recommended_to_watch .carousel_box .loading_gif_box {
  position: absolute;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: flex;
}
.recommended_to_watch .carousel_box .loading_gif {
  width: 50px;
  margin: auto !important;
  padding: 50px 0;
}
.recommended_to_watch .items {
  display: flex;
  flex-direction: column;
  color: white;
  border-radius: 10px;
  width: 100%;
  height: 340px;
}
@media (max-width: 600px) {
  .recommended_to_watch .items {
    height: 300px;
  }
}
.recommended_to_watch .items_header {
  display: flex;
  align-items: center;
  padding: 10px;
  width: 100%;
  background-image: linear-gradient(#000 0%, transparent 100%);
  border-radius: 10px 10px 0 0;
}
.recommended_to_watch .items_header_logo {
  background-color: #fff;
  border-radius: 50%;
  width: 50px !important;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}
@media (max-width: 600px) {
  .recommended_to_watch .items_header_logo {
    width: 40px !important;
    height: 40px;
  }
}
@media (max-width: 450px) {
  .recommended_to_watch .items_header_logo {
    width: 30px !important;
    height: 30px;
  }
}
.recommended_to_watch .items_header_name {
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .recommended_to_watch .items_header_name {
    font-size: 20px;
  }
}
@media (max-width: 450px) {
  .recommended_to_watch .items_header_name {
    font-size: 15px;
  }
}
.recommended_to_watch .items_header_rate {
  display: flex;
  padding: 13px;
  align-items: center;
  background-color: white;
  border-radius: 30px;
  margin-right: auto;
}
.recommended_to_watch .items_header_rate svg {
  width: 32px;
  height: 32px;
  margin: 0 10px;
}
.recommended_to_watch .items_header_rate p {
  color: #004F6E;
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 0;
  margin-left: 5px;
}
@media (max-width: 600px) {
  .recommended_to_watch .items_header_rate {
    padding: 7px;
  }
  .recommended_to_watch .items_header_rate svg {
    width: 25px;
    height: 25px;
  }
  .recommended_to_watch .items_header_rate p {
    font-size: 20px;
  }
}
@media (max-width: 450px) {
  .recommended_to_watch .items_header_rate {
    padding: 2px;
  }
  .recommended_to_watch .items_header_rate svg {
    width: 20px;
    height: 20px;
  }
  .recommended_to_watch .items_header_rate p {
    font-size: 15px;
  }
}
.recommended_to_watch .items_header_watch {
  display: flex;
  padding: 13px;
  align-items: center;
  background-color: white;
  border-radius: 30px;
  margin-right: 10px;
  margin-left: 10px;
}
.recommended_to_watch .items_header_watch_margin {
  margin-right: auto;
}
.recommended_to_watch .items_header_watch svg {
  width: 32px;
  height: 32px;
  margin: 0 10px;
}
.recommended_to_watch .items_header_watch i {
  font-size: 25px;
  margin: 0 10px;
  margin-left: 15px;
  color: #68e327;
}
.recommended_to_watch .items_header_watch p {
  color: #004F6E;
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 0;
  margin-top: 3px;
  margin-left: 5px;
}
@media (max-width: 600px) {
  .recommended_to_watch .items_header_watch {
    padding: 7px;
  }
  .recommended_to_watch .items_header_watch svg {
    width: 25px;
    height: 25px;
  }
  .recommended_to_watch .items_header_watch i {
    font-size: 25px;
    margin: 0 10px;
  }
  .recommended_to_watch .items_header_watch p {
    font-size: 20px;
  }
}
@media (max-width: 450px) {
  .recommended_to_watch .items_header_watch {
    padding: 4px;
  }
  .recommended_to_watch .items_header_watch svg {
    width: 20px;
    height: 20px;
  }
  .recommended_to_watch .items_header_watch i {
    font-size: 20px;
    margin: 0 10px;
  }
  .recommended_to_watch .items_header_watch p {
    font-size: 15px;
  }
}
.recommended_to_watch .items .items_footer {
  display: flex;
  align-items: center;
  background-color: rgba(125, 44, 221, 0.5);
  border-radius: 10px;
  padding: 20px;
  margin-top: auto;
  width: 100%;
}
.recommended_to_watch .items .items_footer img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.recommended_to_watch .items .items_footer_title {
  margin: 0 15px;
  overflow: hidden;
}
.recommended_to_watch .items .items_footer_title_text {
  font-size: 30px;
  margin-bottom: 0px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 1em;
}
.recommended_to_watch .items .items_footer_title_name {
  font-size: 18px;
  margin-bottom: 0px;
}
.recommended_to_watch .items .items_footer_time {
  background-color: rgba(0, 0, 0, 0.48);
  padding: 4px 12px;
  border-radius: 20px;
  margin: 10px;
  margin-right: auto;
}
.recommended_to_watch .items .items_footer_time p {
  margin: 0;
  font-size: 13px;
}
@media (max-width: 600px) {
  .recommended_to_watch .items .items_footer {
    padding: 15px;
  }
  .recommended_to_watch .items .items_footer img {
    width: 50px;
    height: 50px;
  }
  .recommended_to_watch .items .items_footer_title {
    margin: 0 10px;
  }
  .recommended_to_watch .items .items_footer_title_text {
    font-size: 25px;
  }
  .recommended_to_watch .items .items_footer_title_name {
    font-size: 14px;
  }
  .recommended_to_watch .items .items_footer_time {
    padding: 2px 8px;
    margin: 8px;
  }
  .recommended_to_watch .items .items_footer_time p {
    font-size: 9px;
  }
}
@media (max-width: 450px) {
  .recommended_to_watch .items .items_footer {
    padding: 7px;
  }
  .recommended_to_watch .items .items_footer img {
    width: 35px;
    height: 35px;
  }
  .recommended_to_watch .items .items_footer_title {
    margin: 0 6px;
  }
  .recommended_to_watch .items .items_footer_title_text {
    font-size: 18px;
  }
  .recommended_to_watch .items .items_footer_title_name {
    font-size: 11px;
  }
  .recommended_to_watch .items .items_footer_time {
    padding: 1px 6px;
    margin: 6px;
  }
  .recommended_to_watch .items .items_footer_time p {
    font-size: 6px;
  }
}
.recommended_to_watch .vcrs-stu-dashboard-wrapper {
  overflow: visible;
  height: calc(100% - 103px);
  white-space: normal;
}
.recommended_to_watch .vcrs-stu-dashboard-wrapper .no-class-room-msg {
  color: #fff;
  background: rgba(0, 0, 0, 0.16);
  padding: 7px 7px 20px;
  border-radius: 7px;
  font-weight: 500;
  font-size: 15px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  flex-direction: column;
}
.recommended_to_watch .vcrs-stu-dashboard-wrapper .no-class-room-msg img {
  width: 250px;
  margin-bottom: 20px;
}

.virtual_classrooms {
  max-width: 100%;
}
.virtual_classrooms .virtual_classrooms_title {
  display: flex;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 30px;
}
.virtual_classrooms .virtual_classrooms_title_logo {
  width: 55px;
  height: 55px;
  background-color: #00CDF4;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.virtual_classrooms .virtual_classrooms_title_logo > svg {
  width: 35px;
  height: 35px;
  margin: auto;
}
.virtual_classrooms .virtual_classrooms_title > p {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 500;
  color: white;
  margin: auto 0;
  margin-right: 20px;
}
.virtual_classrooms .virtual_classrooms_title_botton {
  margin-right: auto;
  height: 22px;
  width: auto;
}
@media (max-width: 600px) {
  .virtual_classrooms .virtual_classrooms_title {
    margin-top: 25px;
    margin-bottom: 30px;
  }
  .virtual_classrooms .virtual_classrooms_title_logo {
    width: 55px;
    height: 55px;
  }
  .virtual_classrooms .virtual_classrooms_title_logo > svg {
    width: 35px;
    height: 35px;
  }
  .virtual_classrooms .virtual_classrooms_title > p {
    font-size: 20px;
    margin-right: 20px;
  }
  .virtual_classrooms .virtual_classrooms_title_botton {
    height: 22px;
  }
}
.virtual_classrooms #carousel-virtual_classrooms {
  display: block;
  padding-top: 30px;
  width: 90%;
  max-width: 600px;
  margin: auto;
}
.virtual_classrooms .owl-item.cloned {
  transform: scale(0.8);
  z-index: 15;
  opacity: 0;
}
.virtual_classrooms .owl-item.cloned.center {
  transform: scale(1);
  z-index: 30;
  opacity: 1;
}
.virtual_classrooms .owl-item:not(.center) {
  transform: scale(0.8);
  z-index: 15;
  opacity: 1;
}
.virtual_classrooms .owl-item:not(.center):not(.cloned) + .owl-item:not(.center):not(.cloned) {
  transform: scale(0.9);
  z-index: 15;
  opacity: 1;
}
.virtual_classrooms .owl-item.center {
  transform: scale(1);
  z-index: 30;
}
.virtual_classrooms .owl-item.center + .owl-item:not(.center) {
  z-index: 25;
  opacity: 1;
  transform: scale(0.9);
}
.virtual_classrooms .owl-item.center + .owl-item:not(.center) + .owl-item:not(.center) {
  z-index: 20;
  opacity: 0.5;
  transform: scale(0.8);
}
@media (max-width: 600px) {
  .virtual_classrooms .owl-item {
    transform: scale(1) !important;
  }
}
.virtual_classrooms .vcr-box-stu-dashboard {
  width: 50%;
  min-width: 320px;
  height: max-content;
  color: white;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 600px) {
  .virtual_classrooms .vcr-box-stu-dashboard {
    min-width: 250px;
    width: 100%;
  }
}
.virtual_classrooms .vcr-box-stu-dashboard .virtual_classrooms_item_header {
  align-self: start;
  width: 100%;
  display: flex;
  align-items: center;
}
.virtual_classrooms .vcr-box-stu-dashboard .virtual_classrooms_item_header p {
  margin: 0;
}
.virtual_classrooms .vcr-box-stu-dashboard .virtual_classrooms_item_header .user_photo {
  width: 50px;
  min-height: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 20px;
}
.virtual_classrooms .vcr-box-stu-dashboard .virtual_classrooms_item_header .user_name {
  font-size: 15px;
}
.virtual_classrooms .vcr-box-stu-dashboard .virtual_classrooms_item_header .icon {
  width: 30px;
  margin-right: auto;
  margin-left: 10px;
}
.virtual_classrooms .vcr-box-stu-dashboard .virtual_classrooms_item_header .icon_text {
  font-size: 17px;
  font-weight: 400;
  margin-left: 10px;
}
@media (max-width: 600px) {
  .virtual_classrooms .vcr-box-stu-dashboard .virtual_classrooms_item_header .user_photo {
    width: 40px;
    height: 40px;
    min-height: 40px;
    margin-left: 15px;
  }
  .virtual_classrooms .vcr-box-stu-dashboard .virtual_classrooms_item_header .user_name {
    font-size: 13px;
  }
  .virtual_classrooms .vcr-box-stu-dashboard .virtual_classrooms_item_header .icon {
    width: 25px;
  }
  .virtual_classrooms .vcr-box-stu-dashboard .virtual_classrooms_item_header .icon_text {
    font-size: 14px;
    margin-left: 8px;
  }
}
.virtual_classrooms .virtual_classrooms_item_material {
  font-size: 22px;
  font-weight: 600;
  margin-top: 30px;
  text-align: center;
  line-height: 1.2em;
}
@media (max-width: 600px) {
  .virtual_classrooms .virtual_classrooms_item_material {
    font-size: 18px;
  }
}
.virtual_classrooms .virtual_classrooms_item_botton {
  height: 48px;
  width: 200px;
  border: 1px white solid;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px;
  color: white;
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
}
.virtual_classrooms .virtual_classrooms_item_botton p {
  font-size: 22px;
  margin: auto;
}
@media (max-width: 600px) {
  .virtual_classrooms .virtual_classrooms_item_botton {
    height: 38px;
    width: 150px;
    border-radius: 19px;
    margin: 10px;
    font-size: 18px;
  }
  .virtual_classrooms .virtual_classrooms_item_botton p {
    font-size: 18px;
  }
}
.virtual_classrooms .date {
  font-size: 13px;
  font-weight: 200;
  display: flex;
  color: white;
  align-items: center;
  margin-top: 25px;
}
.virtual_classrooms .date > svg {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}
.virtual_classrooms .date > i {
  margin-left: 10px;
}
.virtual_classrooms .date > p {
  margin: auto 0;
  font-weight: 400;
  margin-left: 10px;
}
.virtual_classrooms .date > p:last-child {
  margin-left: 0;
}
.virtual_classrooms #carousel-virtual_classrooms {
  position: relative;
}
.virtual_classrooms #carousel-virtual_classrooms .owl-nav {
  display: flex;
  position: absolute;
  top: 50%;
  pointer-events: none;
  width: 100%;
  justify-content: space-between;
}
.virtual_classrooms #carousel-virtual_classrooms .owl-nav button {
  pointer-events: auto;
}
.virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-next {
  transform: translate(50%, -50%);
}
.virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-next > i {
  font-size: 2em;
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--main-color);
  margin-right: 4px;
  border: 1px solid var(--main-color);
}
@media (max-width: 600px) {
  .virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-next {
    transform: translate(35%, -50%);
  }
  .virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-next i {
    width: 40px;
    height: 40px;
  }
}
.virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-next:hover {
  background-color: transparent;
}
.virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-prev {
  transform: translate(-50%, -50%);
}
.virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-prev > i {
  font-size: 2em;
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--main-color);
  margin-right: 4px;
  border: 1px solid var(--main-color);
  transform: scaleX(-1);
}
@media (max-width: 600px) {
  .virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-prev {
    transform: translate(-35%, -50%);
  }
  .virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-prev i {
    width: 40px;
    height: 40px;
  }
}
.virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-prev:hover {
  background-color: transparent;
}
.virtual_classrooms .vcrs-stu-dashboard-wrapper {
  overflow: visible;
  height: calc(100% - 103px);
  min-height: 200px;
  white-space: normal;
}
.virtual_classrooms .vcrs-stu-dashboard-wrapper .no-class-room-msg {
  color: #fff;
  background: rgba(0, 0, 0, 0.16);
  padding: 7px 7px 20px;
  border-radius: 7px;
  font-weight: 500;
  font-size: 15px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  flex-direction: column;
}
.virtual_classrooms .vcrs-stu-dashboard-wrapper .no-class-room-msg img {
  width: 250px;
  margin-bottom: 20px;
}
.virtual_classrooms .owl-dots.disabled, .virtual_classrooms .owl-nav.disabled {
  display: none !important;
}

.attachment_details_wrapper {
  background-color: transparent;
  padding: 20px 10px;
  width: 100%;
  margin: 0 auto;
  display: grid;
}
.attachment_details_wrapper iframe {
  border-radius: 7px;
}
@media (min-width: 950px) {
  .attachment_details_wrapper {
    grid-column-gap: 10px;
  }
  .attachment_details_wrapper:not(.teleschool_wrapper) {
    grid-template-columns: calc(70% - 20px) 30%;
  }
}
.attachment_details_wrapper .attachment_details_left_side {
  position: relative;
}
.attachment_details_wrapper .attachment_details_left_side .report_content {
  top: 10px;
  left: 10px;
}
.attachment_details_wrapper .ondriveWrapper {
  text-align: center;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.attachment_details_wrapper .ondriveWrapper a {
  margin: 20px 0 0;
}
.attachment_details_wrapper .ondriveWrapper img {
  width: 200px;
  height: fit-content;
  filter: brightness(0) invert(1);
}
.attachment_details_wrapper .scroll-bar {
  margin-top: 20px;
  height: auto;
  width: auto;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}
.attachment_details_wrapper .one-line {
  word-wrap: break-word;
  display: flex;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 10px 0;
  text-decoration: unset;
}
.attachment_details_wrapper .one-line .btns-warpper {
  width: calc(100% - 160px);
}
.attachment_details_wrapper .one-line .btns-warpper a {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  max-height: 6rem;
  -webkit-line-clamp: 3;
  white-space: normal;
  width: 100%;
}
.attachment_details_wrapper .one-line a {
  display: block;
  white-space: nowrap;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 7px;
  color: #444;
  min-width: 150px;
}
.attachment_details_wrapper .one-line a.onedriveLink {
  color: #fff;
}
.attachment_details_wrapper .one-line img {
  width: 150px;
  min-width: 150px;
  border-radius: 7px;
  height: 100px;
  object-fit: cover;
  margin-left: 10px;
}
.attachment_details_wrapper .one-line img[src*="document_attachment.png"], .attachment_details_wrapper .one-line img[src*="attachment_default_icon.svg"] {
  object-fit: contain;
  padding: 3px;
  background: #fafafa;
}
.attachment_details_wrapper .carousel-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  width: 100%;
}
.attachment_details_wrapper .slider-carousel {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.attachment_details_wrapper .navigation {
  font-size: 25px;
  font-weight: 700;
}
.attachment_details_wrapper .navigation .nav-btn {
  background: #fff;
  cursor: pointer;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  color: var(--main-color);
  opacity: 0.9;
  transition: ease-in-out all 0.3s;
  font-size: 20px;
}
.attachment_details_wrapper .navigation .nav-btn:hover {
  opacity: 1;
}
.attachment_details_wrapper .carousel {
  margin-top: 20px;
  transition: all 0.3s ease;
}
.attachment_details_wrapper .carousel img {
  width: 100%;
  transition: all 0.3s ease;
  border: 8px solid white;
}
.attachment_details_wrapper .caption {
  position: absolute;
  bottom: 0;
  width: 103%;
  display: flex;
  font-size: 20px;
  justify-content: center;
  align-items: center;
  color: white;
  background: rgba(0, 0, 0, 0.3);
  height: 35px;
}
.attachment_details_wrapper .carousel-container .item {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}
.attachment_details_wrapper .carousel-container .item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (max-width: 500px) {
  .attachment_details_wrapper .carousel-container .item img {
    min-width: 250px;
    max-width: 250px;
    min-height: unset;
  }
}
.attachment_details_wrapper .main {
  display: block !important;
}
.attachment_details_wrapper #water-mark {
  width: 10% !important;
}
.attachment_details_wrapper #water-mark img {
  width: 100% !important;
}
.attachment_details_wrapper #water-mark p.name {
  font-size: 12px;
}
.attachment_details_wrapper .recommandation-container {
  display: flex;
  flex-direction: column;
}
.attachment_details_wrapper .slider {
  align-items: center;
  border-radius: 29px;
  background-color: #eeeeee38;
  display: flex;
  position: relative;
  padding: 15px 50px;
}
.attachment_details_wrapper .fa-chevron-left {
  left: 0;
}
.attachment_details_wrapper .fa-chevron-right {
  right: 0;
}
.attachment_details_wrapper .fa-chevron-left, .attachment_details_wrapper .fa-chevron-right {
  cursor: pointer;
  font-size: 40px;
  margin: 0 10px;
  position: absolute;
}
.attachment_details_wrapper .fa-chevron-left:hover, .attachment_details_wrapper .fa-chevron-right:hover {
  color: var(--main-color);
}
.attachment_details_wrapper .video-title {
  color: #444;
  font-size: 14px;
  font-family: "Roboto";
  padding: 6px 0;
}
.attachment_details_wrapper .video-title p {
  margin: 0;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  max-height: 6rem;
  -webkit-line-clamp: 3;
  white-space: normal;
  overflow: hidden;
}
.attachment_details_wrapper .rec_publish_date {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 3px;
}
.attachment_details_wrapper .reaction-element-wrapper {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 10px 0;
  flex-wrap: wrap;
}
.attachment_details_wrapper .reaction-element-wrapper > div, .attachment_details_wrapper .reaction-element-wrapper > span {
  margin-bottom: 5px !important;
}
.attachment_details_wrapper .reaction-element-wrapper .avatar-holder {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 15px;
  display: flex;
  align-items: center;
  padding: 7px 15px;
  flex: 1;
  margin: 0;
  min-height: 82px;
  min-width: 250px;
}
.attachment_details_wrapper .reaction-element-wrapper .avatar-holder img {
  min-width: 70px;
}
.attachment_details_wrapper .reaction-element-wrapper .avatar-holder > div {
  margin-right: 10px;
}
.attachment_details_wrapper .reaction-element-wrapper .avatar-holder h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #fff;
}
.attachment_details_wrapper .reaction-element-wrapper .avatar-holder a {
  color: #fff;
}
.attachment_details_wrapper .reaction-element-wrapper #reactions_element {
  background: transparent;
  padding: 0;
  margin: 0;
  width: unset;
  display: inline-flex;
}
@media (max-width: 500px) {
  .attachment_details_wrapper .reaction-element-wrapper #reactions_element {
    flex: 1;
  }
}
.attachment_details_wrapper .reaction-element-wrapper #reactions_element .reaction_status {
  background: transparent;
  display: inline-flex;
}
@media (max-width: 500px) {
  .attachment_details_wrapper .reaction-element-wrapper #reactions_element .reaction_status {
    flex: 1;
  }
}
.attachment_details_wrapper .reaction-element-wrapper #reactions_element .reaction_status .btn {
  background: rgba(0, 0, 0, 0.15);
  padding: 7px 10px;
  margin-right: 5px;
  height: 82px;
  outline: 0;
  border: 0;
  color: #fff;
  border-radius: 15px;
}
@media (min-width: 950px) {
  .attachment_details_wrapper .reaction-element-wrapper #reactions_element .reaction_status .btn {
    min-width: 80px;
  }
}
@media (max-width: 500px) {
  .attachment_details_wrapper .reaction-element-wrapper #reactions_element .reaction_status .btn {
    min-width: 80px;
    flex: 1;
  }
}
.attachment_details_wrapper .reaction-element-wrapper #reactions_element .reaction_status .btn i {
  display: block;
  font-size: 1.5em;
  margin: 0 0 5px;
}
.attachment_details_wrapper .reaction-element-wrapper .stars-attachments-container {
  background: rgba(0, 0, 0, 0.15);
  padding: 7px 15px;
  height: 82px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  border-radius: 15px;
}
.attachment_details_wrapper .reaction-element-wrapper .stars-attachments-container .stars form {
  border: 0;
  white-space: nowrap;
}
@media (max-width: 500px) {
  .attachment_details_wrapper .reaction-element-wrapper .stars-attachments-container {
    flex: 1;
  }
}
.attachment_details_wrapper .reaction-element-wrapper .stars-attachments-container label.star {
  color: #fff;
  margin: 10px 3px;
}
.attachment_details_wrapper .reaction-element-wrapper .attachDesc {
  background: rgba(0, 0, 0, 0.15);
  padding: 7px 15px;
  height: 82px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  border-radius: 15px;
}
@media (max-width: 500px) {
  .attachment_details_wrapper .reaction-element-wrapper .attachDesc {
    flex: 1;
  }
}
.attachment_details_wrapper .reaction-element-wrapper .attachDesc div {
  color: #fff;
  text-align: center;
  font-weight: bold;
}
.attachment_details_wrapper .reaction-element-wrapper .attachDesc span {
  color: #fff;
  display: block;
  font-weight: normal;
}
.attachment_details_wrapper .attachment_content_wrapper {
  background: rgba(0, 0, 0, 0.15);
  padding: 15px;
  border-radius: 15px;
  position: relative;
}
.attachment_details_wrapper .attachment_content_wrapper .video-js {
  border-radius: 7px;
  max-width: 100%;
  overflow: hidden;
}
.attachment_details_wrapper .attachment-tabs {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.attachment_details_wrapper .attachment-tabs li {
  flex: 1;
  margin-bottom: 5px;
  flex-basis: content;
}
.attachment_details_wrapper .attachment-tabs li:not(:last-child) {
  margin-left: 7px;
}
.attachment_details_wrapper .attachment-tabs li a {
  display: inline-flex;
  flex-direction: column;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.01);
  border-radius: 7px;
  padding: 7px 12px;
  justify-content: center;
  align-items: center;
  text-decoration: unset;
  width: 100%;
}
.attachment_details_wrapper .attachment-tabs li a i {
  margin-bottom: 7px;
}
.attachment_details_wrapper .attachment-tabs li a i:before {
  color: #fff;
  font-size: 1.7em;
}
.attachment_details_wrapper .attachment-tabs li.active a {
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid var(--main-color);
}
.attachment_details_wrapper .attachment-tabs li.active a i:before {
  color: var(--main-color);
}
.attachment_details_wrapper .attachment_details_right_side {
  background: rgba(0, 0, 0, 0.15);
  padding: 15px;
  border-radius: 15px;
}
.attachment_details_wrapper .tab-content.view-attachment-tab-content {
  box-shadow: unset;
  padding: 0;
}
.attachment_details_wrapper .tab-content.view-attachment-tab-content .tab-pane {
  background: #fff;
  padding: 20px;
  border-radius: 7px;
}
.attachment_details_wrapper .tab-content.view-attachment-tab-content .tab-pane#Comments {
  padding: 0 20px 20px;
}
.attachment_details_wrapper .tab-content.view-attachment-tab-content .tab-pane h2 {
  padding: 0;
  margin: 10px 0;
}
.attachment_details_wrapper .tab-content.view-attachment-tab-content .tab-pane #comments-section {
  margin: 10px 0;
}
.attachment_details_wrapper .tab-content.view-attachment-tab-content .tab-pane form {
  background: transparent !important;
  padding: 0;
  border-radius: 0;
  margin: 0;
  border: 0;
}
.attachment_details_wrapper .tab-content.view-attachment-tab-content .tab-pane form#insertCommentForm {
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.attachment_details_wrapper .tab-content.view-attachment-tab-content .tab-pane form fieldset {
  padding: 0;
}
.attachment_details_wrapper .tab-content.view-attachment-tab-content .tab-pane form fieldset legend {
  padding: 0;
}
.attachment_details_wrapper .cke_1 .cke_top, .attachment_details_wrapper .cke_1 .cke_bottom {
  background: #fff;
}
.attachment_details_wrapper #AttachmentsCommentComment {
  width: 100%;
}
.attachment_details_wrapper .list_of_summary_on_video {
  list-style: none;
}
.attachment_details_wrapper .list_of_summary_on_video li {
  padding: 10px 0;
}
.attachment_details_wrapper .list_of_summary_on_video li:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.attachment_details_wrapper .list_of_summary_on_video li a {
  cursor: pointer;
  color: #444;
  width: 100%;
  display: block;
}
.attachment_details_wrapper .list_of_summary_on_video li a i {
  color: var(--main-color);
  margin-left: 10px;
}
.attachment_details_wrapper .text_outcomes {
  padding: 7px 0;
}
.attachment_details_wrapper.teleschool_wrapper .panel {
  box-shadow: unset;
}
.attachment_details_wrapper.teleschool_wrapper .btn.disabled {
  pointer-events: none;
}
.attachment_details_wrapper.teleschool_wrapper .take-assessment .btn {
  width: 30%;
  height: 47px;
  min-width: 200px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
}
.attachment_details_wrapper.teleschool_wrapper .take-assessment .btn span {
  display: inline-block;
  margin-left: 10px;
}

.comment_of_attachment {
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
}
.comment_of_attachment:not(:last-child) {
  border-bottom: 1px solid #ddd;
}
.comment_of_attachment .post_title h4 {
  margin: 7px 0;
}
.comment_of_attachment .post_body {
  padding: 0 !important;
  margin-top: 15px;
}
.comment_of_attachment img {
  width: 50px;
  height: 50px;
  border: 1px solid #eee;
  border-radius: 50%;
  margin-left: 15px;
}
.comment_of_attachment .comment_actions {
  border: 0;
  padding-bottom: 15px;
}
.comment_of_attachment .post_date a {
  color: var(--main-color);
}
.comment_of_attachment .post_date span {
  opacity: 0.7;
  font-size: 12px;
}
.comment_of_attachment .notice {
  color: #444;
}
.comment_of_attachment .notice i {
  margin-left: 5px;
  color: #F7CA0D;
  font-weight: bold;
  font-size: 1.1em;
}

.flowplayer_wrapper, .youtube_player_container, .vimeo_player_container {
  position: relative;
}
.flowplayer_wrapper .video-js, .youtube_player_container .video-js, .vimeo_player_container .video-js {
  width: 100%;
}
.flowplayer_wrapper .questions_on_video, .youtube_player_container .questions_on_video, .vimeo_player_container .questions_on_video {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  left: 0;
  padding: 20px;
  color: #fff;
  height: 100%;
}
.flowplayer_wrapper .questions_on_video .question_, .youtube_player_container .questions_on_video .question_, .vimeo_player_container .questions_on_video .question_ {
  text-align: center;
}
.flowplayer_wrapper .questions_on_video input, .youtube_player_container .questions_on_video input, .vimeo_player_container .questions_on_video input {
  margin: 7px;
}
.flowplayer_wrapper .questions_on_video input[type=radio], .youtube_player_container .questions_on_video input[type=radio], .vimeo_player_container .questions_on_video input[type=radio] {
  display: none;
}
.flowplayer_wrapper .questions_on_video label, .youtube_player_container .questions_on_video label, .vimeo_player_container .questions_on_video label {
  width: 100%;
  min-height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
}
.flowplayer_wrapper .questions_on_video .answers, .youtube_player_container .questions_on_video .answers, .vimeo_player_container .questions_on_video .answers {
  max-width: 650px;
  width: 99%;
  margin: 0 auto;
}
.flowplayer_wrapper .questions_on_video .answers .radio, .youtube_player_container .questions_on_video .answers .radio, .vimeo_player_container .questions_on_video .answers .radio {
  border-radius: 25px;
  border: 1px solid #fff;
  margin-bottom: 20px;
}
.flowplayer_wrapper .questions_on_video .btn_skip, .youtube_player_container .questions_on_video .btn_skip, .vimeo_player_container .questions_on_video .btn_skip {
  position: absolute;
  bottom: 10%;
  left: 20px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 20px;
  width: 100px;
}
.flowplayer_wrapper .summary_on_video, .youtube_player_container .summary_on_video, .vimeo_player_container .summary_on_video {
  position: absolute;
  bottom: 50px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #4a4a4a;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  color: #fff;
  min-height: 100px;
  border-radius: 4px;
}
.flowplayer_wrapper .summary_on_video .main_topic, .youtube_player_container .summary_on_video .main_topic, .vimeo_player_container .summary_on_video .main_topic {
  display: flex;
  align-items: top;
  justify-content: space-between;
}
.flowplayer_wrapper .summary_on_video .main_topic i, .youtube_player_container .summary_on_video .main_topic i, .vimeo_player_container .summary_on_video .main_topic i {
  font-size: 20px;
  cursor: pointer;
}

.teleschool-iframe-body-container {
  background: transparent !important;
}
.teleschool-iframe-body-container:after, .teleschool-iframe-body-container:before {
  display: none;
}
.teleschool-iframe-body-container #page-container {
  min-height: unset !important;
}
.teleschool-iframe-body-container .page-body {
  padding: 0;
}
.teleschool-iframe-body-container .teleschool-iframe-body-container {
  padding: 0;
}
.teleschool-iframe-body-container .questions_group center .question_indecator, .teleschool-iframe-body-container .questions_group center .progress {
  display: none;
}
.teleschool-iframe-body-container .questions_group form {
  padding: 0;
}
.teleschool-iframe-body-container #question_container .widget-header .progress-bar-palegreen {
  background: var(--main-color) !important;
}
.teleschool-iframe-body-container #question_container .widget-header .badge {
  display: none;
}
.teleschool-iframe-body-container #question_container .widget-header .widget-buttons {
  width: 100%;
  background: rgba(213, 213, 213, 0.1);
  border-radius: 5px;
  padding: 7px 10px;
  height: 50px;
}
.teleschool-iframe-body-container #question_container .widget-header .widget-buttons .progress {
  width: calc(100% - 75px) !important;
  height: 10px;
  border-radius: 25px;
}
.teleschool-iframe-body-container #question_container .widget-header .widget-buttons .question_indecator {
  color: var(--main-color);
  font-weight: bold;
  font-size: 16px;
}
.teleschool-iframe-body-container #question_container .widget-header .widget-buttons .btn {
  display: none;
}
.teleschool-iframe-body-container #question_container .widget-body .question-main-text-wrapper {
  font-size: 16px;
  font-weight: bold;
}
.teleschool-iframe-body-container #question_container .widget-body .listen-and-qMark-container {
  direction: unset !important;
  width: 27px !important;
}
.teleschool-iframe-body-container #question_container .answer {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin: 25px 0 0;
  padding: 20px 0 25px;
}
.teleschool-iframe-body-container .ExamPreviewBox .edit-button {
  display: none !important;
}
.teleschool-iframe-body-container .ExamPreviewBox input[type=radio] {
  pointer-events: none !important;
}
.teleschool-iframe-body-container #insertCommentForm, .teleschool-iframe-body-container #CommentSectoin {
  display: none !important;
}

.courses_list_pk .boxgrid {
  border-radius: 25px !important;
}
.courses_list_pk .boxgrid .disable-top {
  top: 0px !important;
  cursor: default !important;
}
.courses_list_pk .boxgrid .cover {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.courses_list_pk .boxgrid .cover .teacher-info {
  text-align: center;
  position: relative;
  border: 1px solid #eee;
  border-radius: 25px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.courses_list_pk .boxgrid .cover .teacher-info strong {
  padding-right: 55px;
  padding-left: 50px;
}
.courses_list_pk .boxgrid .cover .teacher-info img {
  order: 0;
  top: 50% !important;
  transform: translateY(-50%);
  right: 10px !important;
  width: 40px !important;
  height: 40px !important;
}
.courses_list_pk .boxgrid .cover .image {
  position: relative !important;
  width: unset !important;
  height: unset !important;
  left: unset !important;
  transform: unset !important;
}
.courses_list_pk .boxgrid .cover .image img {
  top: unset !important;
  position: relative;
  display: block;
  margin: 0 auto;
  left: 0;
  right: 0;
  transform: unset;
}
.courses_list_pk .boxgrid .cover .title_cover {
  top: 55%;
  margin: 0;
  text-transform: uppercase;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.courses_list_pk .main-section-title-of-stu-dashboard .main-section-title {
  color: #fff;
}

html.other_env .page-sidebar a[href="/messages/share_ideas"],
html.other_env .page-sidebar .social-links,
html.other_env .page-sidebar .messagesPrivileges {
  display: none !important;
}
html.other_env .quickLinks [data-title="/# mailbox"] {
  display: none !important;
}

.inactive {
  filter: grayscale(100%);
  opacity: 0.7;
}

.inactive-img {
  filter: grayscale(100%);
  opacity: 0.7;
  position: relative;
  top: -60px;
}

.courses_item_box_warningOutOfTime_list {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 400px;
  height: 12%;
  background-color: rgba(247, 202, 13, 0.25);
  position: relative;
  top: 49%;
  align-self: center;
  border-radius: 20px;
  position: relative;
}
.courses_item_box_warningOutOfTime_list_icon {
  margin-left: 10px;
  color: #444;
}
.courses_item_box_warningOutOfTime_list_text {
  margin: 0px;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #444 !important;
}
.courses_item_box_warningOutOfTime_list_text_res {
  font-weight: 600 !important;
}
@media only screen and (max-width: 600px) {
  .courses_item_box_warningOutOfTime_list_text_res {
    margin: 0px;
    font-weight: 600;
    display: block;
    text-align: center;
  }
}

.courses_item_box_warningOutOfTime_list_browser {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 560px;
  height: 18%;
  background-color: #F7CA0D;
  position: relative;
  margin-left: 10px;
  padding: 10px;
  top: 49%;
  left: 0%;
  border-radius: 20px;
  position: relative;
}
.courses_item_box_warningOutOfTime_list_browser_icon {
  color: #444;
}
.courses_item_box_warningOutOfTime_list_browser_text {
  margin: 0px 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #444 !important;
}
.courses_item_box_warningOutOfTime_list_browser_text_res {
  font-weight: 600 !important;
}

@media only screen and (max-width: 600px) {
  .courses_item_box_warningOutOfTime_list_browser {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 18%;
    background-color: #F7CA0D;
    position: relative;
    margin-left: 10px;
    padding: 10px;
    top: 49%;
    left: 0%;
    border-radius: 20px;
    position: relative;
  }
}
form.without-border {
  border: 0;
}

body form.form-style-101 {
  background: transparent;
  border: 0;
  width: 100%;
  border-radius: 4px;
}
body form.form-style-101:before {
  background: transparent;
}
body form.form-style-101 .form-group input, body form.form-style-101 .form-control, body form.form-style-101 select,
body form.form-style-101 .chosen-container-multi .chosen-choices, body form.form-style-101 .chosen-container-multi .chosen-choices li.search-choice, body form.form-style-101 .chosen-container-single .chosen-single, body form.form-style-101 .chosen-container-active.chosen-with-drop .chosen-single,
body form.form-style-101 .select-styled {
  border-radius: 4px !important;
}
body form.form-style-101 .row {
  margin: 0 -10px;
}
body form.form-style-101 .form-group {
  padding-bottom: 0;
}
body form.form-style-101 .form-group .control-label {
  color: #444;
  opacity: 0.9;
}
body form.form-style-101 .form-title {
  font-size: 22px;
  color: #444;
  font-weight: 500;
}
body form.form-style-101 .chosen-container .chosen-drop {
  width: 100%;
}
body form.form-style-101 input[type=submit] {
  border: 0;
  border-radius: 4px;
  font-size: 14px;
}
body form.form-style-101 .select-options {
  width: 99%;
}

.icon-video-files .path21:before,
.icon-exam .path29:before,
.icon-exam .path7:before,
.icon-exam .path20:before,
.icon-exam .path16:before,
.icon-video-files .path22:before,
.icon-exam .path18:before,
.icon-typing .path10:before,
.icon-typing .path11:before,
.icon-typing .path12:before,
.icon-undraw_credit_card_re_blml .path22:before,
.icon-undraw_credit_card_re_blml .path21:before,
.icon-undraw_credit_card_re_blml .path20:before,
.icon-undraw_credit_card_re_blml .path19:before,
.icon-undraw_credit_card_re_blml .path18:before,
.icon-undraw_credit_card_re_blml .path17:before,
.icon-undraw_credit_card_re_blml .path16:before,
.icon-undraw_credit_card_re_blml .path15:before,
.icon-undraw_credit_card_re_blml .path14:before,
.icon-undraw_credit_card_re_blml .path13:before,
.icon-undraw_credit_card_re_blml .path12:before,
.icon-undraw_credit_card_re_blml .path11:before,
.icon-undraw_credit_card_re_blml .path10:before,
.icon-undraw_credit_card_re_blml .path9:before,
.icon-undraw_credit_card_re_blml .path3:before,
.icon-undraw_credit_card_re_blml .path5:before,
.icon-undraw_credit_card_re_blml .path4:before {
  color: var(--main-color);
}

.all_content_cotaner {
  display: flex;
  height: 95vh;
  padding: 15px;
}
@media screen and (max-width: 1170px) {
  .all_content_cotaner {
    flex-direction: column-reverse;
    height: unset;
  }
}
.all_content_cotaner .pages_form_contaner {
  padding: 0;
}
@media screen and (max-width: 1170px) {
  .all_content_cotaner .pages_form_contaner {
    width: 100%;
    height: 450px;
  }
}
.all_content_cotaner #pages {
  min-width: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  border-radius: 10px;
}
.all_content_cotaner #pages .form_title {
  margin: 0;
  padding: 15px 15px 0px 20px;
}
.all_content_cotaner #pages .form_item {
  overflow: auto;
}
.all_content_cotaner #pages .form_item .add_container {
  gap: 10px;
  padding: 10px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
  justify-content: center;
  align-items: center;
}
.all_content_cotaner #pages .form_item .add_container > .box {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
.all_content_cotaner #pages .form_item .add_container > .box .add_box {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 11px;
  cursor: pointer;
  margin: 0px;
  margin-bottom: 0px;
  background: inherit;
  padding: 10px;
}
.all_content_cotaner #pages .form_item .add_container > .box .add_box i {
  font-size: 26px;
  margin: 0;
  color: #ccc;
  font-weight: bold;
  padding: 6px;
  border: 3px dashed #ccc;
  border-radius: 6px;
}
@media screen and (max-width: 500px) {
  .all_content_cotaner #pages .form_item .add_container > .box .add_box i {
    font-size: 20px;
    padding: 2px;
  }
}
.all_content_cotaner #pages .form_item .add_container > .box .add_box p {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: #444;
}
@media screen and (max-width: 500px) {
  .all_content_cotaner #pages .form_item .add_container > .box .add_box p {
    font-size: 10px;
  }
}
.all_content_cotaner #pages .form_item .img-item {
  max-height: 150px;
  max-width: 270px;
}
.all_content_cotaner #pages .form_item .video_types_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.all_content_cotaner #pages .form_item li {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  font-size: 45px;
}
.all_content_cotaner #pages .form_item li.onedrive img {
  filter: brightness(1000);
  width: 50px;
}
.all_content_cotaner #pages .form_item li.googleDrive img {
  filter: none;
  width: 50px;
}
.all_content_cotaner #pages .form_item .file_uploaded span {
  border-radius: 20px;
  background: #000;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 13px;
  font-weight: normal;
  max-width: 200px;
  vertical-align: middle;
  padding: 15px;
  line-height: 10px;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.all_content_cotaner #pages .form_item .input_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70%;
  margin-bottom: 15px;
}
.all_content_cotaner #pages .form_item .input_box label {
  font-size: 15px;
  font-weight: 500;
}
.all_content_cotaner #pages .form_item .input_box input {
  width: 100%;
  height: 30px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.all_content_cotaner #pages .save_form_btn {
  align-self: flex-end;
  margin-top: auto;
  padding: 5px;
  bottom: 0px;
  background: inherit;
  border-radius: 0 0 20px 20px;
  width: 100%;
}
.all_content_cotaner #pages .save_form_btn .botton_item {
  width: 95%;
  margin: 5px !important;
  margin-bottom: 13px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 500px) {
  .all_content_cotaner #pages .save_form_btn .botton_item {
    padding: 8px 20px;
  }
}
.all_content_cotaner #pages .save_form_btn .botton_item:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
.all_content_cotaner #pages .save_form_btn .botton_item.disabled.loading {
  cursor: wait;
}
.all_content_cotaner #pages .save_form_btn .botton_item.disabled {
  cursor: not-allowed;
}
.all_content_cotaner #pages .save_form_btn .submit_btn {
  border-top: 1px solid #ddd;
}
.all_content_cotaner #pages .save_form_btn .submit_btn input {
  width: 95%;
  margin: 10px auto 5px auto !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 500px) {
  .all_content_cotaner #pages .save_form_btn .submit_btn input {
    padding: 8px 20px;
  }
}
.all_content_cotaner #pages .save_form_btn .submit_btn input:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 1170px) {
  .all_content_cotaner .pages_page_contaner {
    width: 100%;
    height: 650px;
  }
}
@media screen and (max-width: 500px) {
  .all_content_cotaner .pages_page_contaner {
    padding: 0;
  }
}
.all_content_cotaner .pages_page_contaner .page_btn_controller {
  display: flex;
  justify-content: center;
  gap: 10px;
}
@media screen and (max-width: 500px) {
  .all_content_cotaner .pages_page_contaner .page_btn_controller button {
    font-size: 10px;
  }
}
.all_content_cotaner .pages_page_contaner .form_page {
  width: 95%;
  max-height: 100%;
  height: 100%;
  overflow-x: auto;
  margin: auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px 0px;
}
@media screen and (max-width: 500px) {
  .all_content_cotaner .pages_page_contaner .form_page {
    width: 100%;
    padding: 20px 0px;
  }
}
.all_content_cotaner .pages_page_contaner .form_page .page_item {
  position: relative;
  display: flex;
  justify-content: start;
  padding: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 13px 5px;
}
.all_content_cotaner .pages_page_contaner .form_page .page_item .icon-add-box {
  display: none;
}
.all_content_cotaner .pages_page_contaner .form_page .page_item .icon-add-box .icon-add.next {
  position: absolute;
  font-size: 18px;
  color: #ccc;
  top: 100%;
  right: 50%;
  transform: translate(50%, -50%);
}
.all_content_cotaner .pages_page_contaner .form_page .page_item .icon-add-box .icon-add.prev {
  position: absolute;
  font-size: 18px;
  top: 0px;
  color: #ccc;
  right: 50%;
  transform: translate(50%, -50%);
}
.all_content_cotaner .pages_page_contaner .form_page .page_item iframe {
  width: 320px;
  height: 200px;
  border-radius: 10px;
  background: #000;
}
@media screen and (max-width: 600px) {
  .all_content_cotaner .pages_page_contaner .form_page .page_item iframe {
    max-width: 90%;
    width: 320px;
    height: auto;
    max-height: 160px;
  }
}
.all_content_cotaner .pages_page_contaner .form_page .page_item iframe.h5p_content_iframe {
  border-radius: 0px;
  background: transparent;
}
@media screen and (max-width: 600px) {
  .all_content_cotaner .pages_page_contaner .form_page .page_item iframe.h5p_content_iframe {
    max-width: unset;
    width: 320px;
    height: auto;
    max-height: unset;
  }
}
.all_content_cotaner .pages_page_contaner .form_page .page_item .video-js {
  border-radius: 10px;
  overflow: hidden;
}
.all_content_cotaner .pages_page_contaner .form_page .page_item.selected_item {
  background: rgba(0, 0, 0, 0.05);
}
.all_content_cotaner .pages_page_contaner .form_page .page_item.selected_item .icon-add-box {
  display: block;
}
.all_content_cotaner .pages_page_contaner .form_page .page_item .option_bar {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  right: 0;
  top: 0;
}
.all_content_cotaner .pages_page_contaner .form_page .page_item .option_bar .align_types {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(1px, 108%);
  display: flex;
  flex-direction: column-reverse;
}
.all_content_cotaner .pages_page_contaner .form_page .page_item .edit_icon {
  cursor: pointer;
  color: #04bede;
  font-size: 15px;
}
.all_content_cotaner .pages_page_contaner .form_page .page_item .edit_icon:hover {
  color: rgba(var(--main-color-rgb), 90%);
}
.all_content_cotaner .pages_page_contaner .form_page .page_item .edit_icon.align {
  position: relative;
}
.all_content_cotaner .pages_page_contaner .form_page .page_item .edit_icon.delete {
  color: #d9534f;
}
.all_content_cotaner .pages_page_contaner .form_page .page_item .edit_icon.delete:hover {
  color: #ed665c;
}
.all_content_cotaner .pages_page_contaner .form_page .page-img {
  position: relative;
  width: auto;
  max-width: 100%;
  height: 180px;
  min-height: 180px;
  min-width: 140px;
  overflow: auto;
}
.all_content_cotaner .modal-body #pages .save_form_btn {
  background: none;
}
.all_content_cotaner #cke_Body {
  width: 90% !important;
  margin: auto;
}
.all_content_cotaner ul.video-type {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, auto));
  justify-content: center;
  align-items: center;
}
.all_content_cotaner ul.video-type li {
  display: inline-flex;
  width: 80px;
  height: 80px;
  justify-content: center;
  align-items: center;
  background: #EEE;
  line-height: 100px;
  font-size: 3.5em;
  color: #FFF;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  margin: 5px;
}
.all_content_cotaner ul.video-type li:hover, .all_content_cotaner ul.video-type li.active {
  opacity: 1;
}
.all_content_cotaner .fa-cloud {
  color: darkblue;
}
.all_content_cotaner li.canva img {
  padding: 10px;
  border-radius: 10px;
}
.all_content_cotaner li.canva, .all_content_cotaner li.file {
  background: #0948AC !important;
}
.all_content_cotaner li.onedrive {
  background: #0948AC !important;
}
.all_content_cotaner li.onedrive img {
  filter: brightness(10);
  width: 50px;
}
.all_content_cotaner li.googleDrive {
  background: #0948AC !important;
}
.all_content_cotaner li.googleDrive img {
  filter: brightness(10);
  width: 50px;
}
.all_content_cotaner li#ai_file {
  background: #0948AC !important;
}
.all_content_cotaner li#ai_file img {
  width: 153px;
  margin-top: -4px;
}
.all_content_cotaner ul.video-type li.youtube {
  background: #cc181e;
}
.all_content_cotaner ul.video-type li.vimeo {
  background: #4EBBFF;
}
.all_content_cotaner #carousel-pages-allContent {
  height: 94%;
}
.all_content_cotaner #carousel-pages-allContent .owl-stage-outer {
  height: calc(100% - 35px);
}
.all_content_cotaner #carousel-pages-allContent .owl-stage {
  height: 100%;
}
.all_content_cotaner #carousel-pages-allContent .owl-nav [class*=owl-]:hover {
  background: transparent;
}
.all_content_cotaner #carousel-pages-allContent .owl-item {
  direction: ltr;
  padding: 10px 0;
  height: 100%;
}
.all_content_cotaner #carousel-pages-allContent .owl-item img.page-media-item {
  height: 100%;
  width: auto;
}
@media screen and (max-width: 600px) {
  .all_content_cotaner #carousel-pages-allContent .owl-item img.page-media-item {
    max-width: 95%;
    height: auto;
    max-height: 100%;
  }
}
.all_content_cotaner #carousel-pages-allContent .owl-dots.disabled, .all_content_cotaner #carousel-pages-allContent .owl-nav.disabled {
  display: none !important;
}
.all_content_cotaner #carousel-pages-allContent .owl-nav {
  position: absolute;
  display: flex;
  justify-content: space-between;
  bottom: -3px;
  width: 96%;
  left: 50%;
  transform: translateX(-50%);
}
.all_content_cotaner #carousel-pages-allContent .dots-contaner {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: auto;
}
.all_content_cotaner #carousel-pages-allContent .dots-contaner .owl-dots {
  display: flex;
}
.all_content_cotaner #carousel-pages-allContent .video-js .vjs-tech {
  width: 100% !important;
  height: 100% !important;
}

.email-input-cont {
  width: 100%;
  background-color: #fff;
  min-height: 46px;
  border: 1px solid #d5d5d5;
  border-radius: 25px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.added-emails {
  display: none;
  width: 100%;
  min-height: 25px;
  height: auto;
  flex-wrap: wrap;
  margin: 20px;
}

.added-user {
  display: flex;
  width: auto;
  height: 46px;
  border-radius: 10px;
  align-items: center;
}

.delete-icon:hover {
  cursor: pointer;
}

.email-list {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  width: 95%;
  height: 55px !important;
  background-color: #fff;
  animation: slideDown 1s ease-out forwards;
  transform: translate(3px, 0px);
}

.email-list:hover {
  cursor: pointer;
}

.control-label1 {
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 15px;
  font-family: "Roboto", "Noto Kufi Arabic", "Open Sans", sans-serif !important;
}

.control-label1::after {
  content: " *";
  color: red;
}

.email-item {
  display: flex;
  align-items: center;
  margin-right: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.email-text {
  margin-right: 5px;
}

.remove-button {
  color: red;
  cursor: pointer;
  font-weight: bold;
}

.error {
  color: red;
}

.emailInput {
  position: static;
  /* Default for position */
  margin: 0 !important;
  /* Default margin */
  padding: 0px 20px !important;
  /* Default padding */
  border: none !important;
  /* No border */
  background: transparent !important;
  /* Transparent background */
  font-size: inherit !important;
  /* Inherit font size from parent */
  color: inherit !important;
  /* Inherit text color from parent */
  box-shadow: none !important;
  /* No box shadow */
  width: 100% !important;
  /* Default width */
  height: auto !important;
  /* Default height */
  line-height: normal !important;
  /* Default line height */
  outline: none !important;
  /* No outline */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.page-body form .form-group input.emailInput:hover:not([type=file]),
.page-body form .form-group input.emailInput:focus:not([type=file]) {
  border: none !important;
  background-color: transparent;
  animation: none !important;
}

.avater, .s-avater {
  width: 45px;
  height: 45px;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  margin-left: 10px;
}

.s-avater {
  width: 25px;
  height: 25px;
}

.conten {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.email-text {
  display: inline;
  margin-left: 10px;
}

@keyframes slideDown {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 55px;
    opacity: 1;
  }
}
.auto-generate-exam-container {
  padding: 0 10px 10px 10px;
}
.auto-generate-exam-container .page_loader {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 22222;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-direction: column;
}
.auto-generate-exam-container .page_loader .gg-spinner::before, .auto-generate-exam-container .page_loader .formLoading::before, .auto-generate-exam-container .page_loader .gg-spinner::after, .auto-generate-exam-container .page_loader .formLoading::after, .auto-generate-exam-container .page_loader .gg-spinner, .auto-generate-exam-container .page_loader .formLoading {
  width: 30px;
  height: 30px;
}
.auto-generate-exam-container .auto-generate-page-2 {
  display: none !important;
}
.auto-generate-exam-container .auto-generate-page-2 .auto-generate-header {
  border-bottom: 0;
}
.auto-generate-exam-container.page-2 .auto-generate-page-1 {
  display: none !important;
}
.auto-generate-exam-container.page-2 .auto-generate-page-2 {
  display: block !important;
}
.auto-generate-exam-container .select .select-styled {
  padding-left: 30px;
}
.auto-generate-exam-container .header-title-container {
  padding: 10px;
  padding-right: 0;
}
.auto-generate-exam-container .header-title-container h2 {
  margin-right: 0;
  margin-top: 5px;
}
.auto-generate-exam-container .header-title-container p {
  opacity: 0.8;
}
.auto-generate-exam-container .auto-generate-header {
  border-bottom: 1px solid #eee;
}
.auto-generate-exam-container .auto-generate-header .btn {
  margin: 5px 10px;
  padding: 15px;
  display: flex;
  align-items: center;
}
.auto-generate-exam-container .auto-generate-header .btn i {
  margin-left: 10px !important;
  font-size: 16px;
}
.auto-generate-exam-container .auto-generate-header .page-number {
  background: rgba(var(--main-color-rgb), 0.65);
  border-radius: 15px;
  padding: 3px 10px;
  font-size: 12px;
}
@media screen and (min-width: 450px) {
  .auto-generate-exam-container .voice-assistant-btn-container {
    border-right: 1px solid #eee;
  }
}
.auto-generate-exam-container .voice-assistant-btn-container .btn {
  background: linear-gradient(85deg, #8244e7, #12bdfc);
  border-radius: 25px;
  color: #fff;
  padding: 4px 17px;
  padding-right: 10px;
  margin-right: 20px;
  margin-left: 0;
  border: 0;
}
.auto-generate-exam-container .voice-assistant-btn-container .btn i {
  color: #8244e7;
  background: #fff;
  padding: 9px;
  border-radius: 50%;
  margin: 5px;
  margin-right: 0;
  width: 35px;
  height: 35px;
}
.auto-generate-exam-container .settings-header-container {
  padding: 10px;
  padding-left: 0;
}
@media screen and (max-width: 1050px) {
  .auto-generate-exam-container .settings-header-container {
    padding-right: 0;
  }
  .auto-generate-exam-container .settings-header-container .settings-btn {
    margin-right: 0;
  }
}
@media screen and (max-width: 450px) {
  .auto-generate-exam-container .settings-header-container .settings-btn {
    width: 100%;
  }
  .auto-generate-exam-container .settings-header-container .voice-assistant-btn-container .btn {
    margin: 10px 0;
    width: 100%;
  }
}
.auto-generate-exam-container .auto-exam-section-title p {
  opacity: 0.8;
}
.auto-generate-exam-container .auto-exam-section-title i {
  color: var(--main-color);
  margin-left: 12px;
  font-size: 18px;
}
.auto-generate-exam-container .selects-of-option-container label {
  padding-right: 10px;
}
.auto-generate-exam-container .selects-of-option-container .select-container .select-styled {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media screen and (min-width: 1261px) {
  .auto-generate-exam-container .selects-of-option-container .select-container {
    max-width: 35%;
  }
}
.auto-generate-exam-container .selects-of-option-container .select-container .chosen-container {
  padding: 0 7px;
}
.auto-generate-exam-container .selects-of-option-container .select-container:not(:first-child):not(:last-child) {
  padding: 0 5px;
}
.auto-generate-exam-container .selects-of-option-container .select-container:first-child {
  padding-left: 5px;
}
.auto-generate-exam-container .selects-of-option-container .select-container:last-child {
  padding-right: 5px;
}
.auto-generate-exam-container .container-of-subject-select {
  border-left: 1px solid #eee;
}
.auto-generate-exam-container .adaptive-container {
  background: #fafafa;
  border-radius: 7px;
  padding: 20px 15px;
  margin-top: 30px;
}
.auto-generate-exam-container .adaptive-container.selected {
  background: rgba(var(--main-color-rgb), 0.25);
}
.auto-generate-exam-container .adaptive-container p {
  margin-bottom: 0;
  opacity: 0.7;
}
.auto-generate-exam-container .adaptive-container label {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 15px;
  margin-right: 10px;
}
.auto-generate-exam-container .resource-item {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 7px;
  min-height: 80px;
  cursor: pointer;
  margin-bottom: 15px;
}
.auto-generate-exam-container .resource-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.auto-generate-exam-container .resource-item:not(:last-child) {
  margin-left: 15px;
}
.auto-generate-exam-container .resource-item.loading .resource-icon.loading-icon {
  display: inline-flex;
}
.auto-generate-exam-container .resource-item.loading .resource-icon.default-icon {
  display: none !important;
}
.auto-generate-exam-container .resource-item i.resource-icon {
  padding: 10px;
  border: 1px solid #ddd;
  background: #eee;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
}
.auto-generate-exam-container .resource-item i.resource-icon:before {
  color: #666;
}
.auto-generate-exam-container .resource-item i.resource-icon.loading-icon {
  display: none;
}
.auto-generate-exam-container .resource-item .question-bank-info {
  font-size: 23px;
  margin-right: 10px;
}
.auto-generate-exam-container .resource-item button {
  max-width: 50%;
  width: auto;
  pointer-events: none;
  background: #eee;
  border: 1px solid transparent;
  color: #666;
  border-radius: 20px;
  padding: 7px 15px;
  display: inline-flex;
  align-items: center;
}
.auto-generate-exam-container .resource-item button i {
  margin-right: 15px;
}
.auto-generate-exam-container .resource-item.selected {
  border-color: var(--main-color);
}
.auto-generate-exam-container .resource-item.selected i.resource-icon {
  background: var(--main-color);
  border-color: var(--main-color);
}
.auto-generate-exam-container .resource-item.selected i.resource-icon:before {
  content: "\e934";
  color: #fff;
}
.auto-generate-exam-container .resource-item.selected button {
  pointer-events: unset;
  background: #fff;
  border: 1px solid var(--main-color);
  color: #444;
}
@media screen and (max-width: 800px) {
  .auto-generate-exam-container .resources-list-container {
    flex-direction: column;
  }
  .auto-generate-exam-container .resources-list-container .resource-item {
    margin-left: 0;
    width: 100%;
  }
}
.auto-generate-exam-container .resources-container {
  margin-bottom: 20px;
}
.auto-generate-exam-container .resources-container h5 {
  margin-top: 0;
}
.auto-generate-exam-container .tooltip-info + .tooltip > .tooltip-inner {
  color: #212121;
  background: rgba(var(--main-color-rgb), 0.8) !important;
  border-color: rgba(var(--main-color-rgb), 0.5) !important;
}
.auto-generate-exam-container .tooltip-info + .tooltip.top .tooltip-arrow {
  border-top-color: rgba(var(--main-color-rgb), 0.8) !important;
}
.auto-generate-exam-container .tooltip-info + .tooltip.right .tooltip-arrow {
  border-left-color: rgba(var(--main-color-rgb), 0.8) !important;
}
.auto-generate-exam-container .tooltip-info + .tooltip.left .tooltip-arrow {
  border-right-color: rgba(var(--main-color-rgb), 0.8) !important;
}
.auto-generate-exam-container .tooltip-info + .tooltip.bottom .tooltip-arrow {
  border-bottom-color: rgba(var(--main-color-rgb), 0.8) !important;
}
.auto-generate-exam-container .submit-container .btn {
  padding: 15px;
}
.auto-generate-exam-container .submit-container .btn.reset-btn i {
  font-size: 20px;
  margin-left: 5px;
}
.auto-generate-exam-container .select.disabled {
  pointer-events: none;
  opacity: 0.6;
}
.auto-generate-exam-container .exam-info {
  border: 1px solid #ddd;
  padding: 10px 15px;
  border-radius: 15px;
}
.auto-generate-exam-container .exam-info .exam-info-item {
  flex: 1;
  padding: 0 10px;
  margin: 5px 0 0;
}
.auto-generate-exam-container .exam-info .exam-info-item:not(:last-child) {
  border-left: 1px solid #ddd;
}
.auto-generate-exam-container .exam-info .exam-info-item i {
  margin-left: 10px;
  margin-top: 2px;
  display: block;
  font-size: 16px;
}
.auto-generate-exam-container .exam-info .exam-info-item i:before {
  color: #444;
  opacity: 0.9;
}
.auto-generate-exam-container .exam-info .exam-info-item h6 {
  margin-bottom: 3px;
}
.auto-generate-exam-container .questions-list-container .question-box {
  padding: 15px 15px 25px;
  position: relative;
  border-radius: 7px;
  border: 1px solid #ddd;
  margin-bottom: 35px;
}
.auto-generate-exam-container .questions-list-container .question-box p {
  border: 1px solid #ddd;
  margin: 5px 10px;
  margin-left: 0;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
}
.auto-generate-exam-container .questions-list-container .question-box .question-input-text {
  padding: 10px;
  border-radius: 4px;
  width: calc(100% - 10px);
  margin-right: 10px;
}
.auto-generate-exam-container .questions-list-container .question-box .container-of-inputs {
  position: relative;
}
@media screen and (min-width: 550px) {
  .auto-generate-exam-container .questions-list-container .question-box .container-of-inputs .question-input-text {
    padding-left: 125px;
  }
}
.auto-generate-exam-container .questions-list-container .question-box .correct-answer {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  padding: 1px 14px;
  border-radius: 15px;
  border: 1px solid #ddd;
  font-size: 12px;
}
@media screen and (max-width: 550px) {
  .auto-generate-exam-container .questions-list-container .question-box .question-input-text {
    padding-bottom: 50px;
  }
  .auto-generate-exam-container .questions-list-container .question-box .correct-answer {
    bottom: 0;
    top: unset !important;
    right: 20px;
    left: unset !important;
  }
}
.auto-generate-exam-container .questions-list-container .question-box .box-of-question-text h6 {
  min-width: 19px;
  text-align: center;
}
.auto-generate-exam-container .questions-list-container .question-box .question-settings-wrapper {
  position: absolute;
  left: 20px;
  bottom: -20px;
}
.auto-generate-exam-container .questions-list-container .question-box .question-settings-wrapper i {
  font-size: 19px;
  border: 1px solid #ddd;
  background: #fff;
  height: 40px;
  width: 36px;
  border-radius: 4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 2px;
  cursor: pointer;
}
.auto-generate-exam-container .publish-date-container .select-publish-date {
  min-width: 100px;
  display: flex;
  justify-content: space-between;
}
.auto-generate-exam-container .container-of-publish-to .tab-content {
  box-shadow: unset;
}
.auto-generate-exam-container .container-of-publish-to .container-of-inner-tab {
  border: 1px solid #eee;
  margin-top: 5px;
  padding: 10px 20px;
  border-radius: 5px;
}
.auto-generate-exam-container .container-of-publish-to .nav-tabs > li.active > a, .auto-generate-exam-container .container-of-publish-to .nav-tabs > li.active > a:hover, .auto-generate-exam-container .container-of-publish-to .nav-tabs > li.active > a:focus {
  background: #fafafa;
  border: 0 !important;
  box-shadow: unset;
  border-radius: 4px !important;
}
.auto-generate-exam-container .topics-container {
  position: relative;
}
.auto-generate-exam-container .topics-container .chosen-results li span {
  color: var(--main-color);
  cursor: pointer;
}

.settings-menu-of-auto-generate {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  z-index: 999999;
}
.settings-menu-of-auto-generate .modal-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.settings-menu-of-auto-generate .exam-settings-menu {
  width: 30%;
  min-width: 320px;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  animation: showSettingsMenuOfAutoExams 0.5s forwards;
}
.settings-menu-of-auto-generate .exam-settings-menu h2 {
  font-weight: 500 !important;
  margin-right: 0 !important;
}
.settings-menu-of-auto-generate .exam-settings-menu-title {
  border-bottom: 1px solid #eee;
}
.settings-menu-of-auto-generate .select {
  padding: 0;
}
.settings-menu-of-auto-generate label {
  margin-bottom: 12px;
  font-size: 17px;
}
.settings-menu-of-auto-generate .close-menu {
  font-size: 18px;
}
.settings-menu-of-auto-generate .defficulty-levels-list {
  list-style: none;
}
.settings-menu-of-auto-generate .defficulty-levels-list li:not(:last-child) {
  margin-left: 10px;
}
.settings-menu-of-auto-generate .defficulty-levels-list label {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.settings-menu-of-auto-generate .defficulty-levels-list label span {
  height: 100%;
  width: 100%;
  border: 1px solid #eee;
  padding: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 400;
}
.settings-menu-of-auto-generate .defficulty-levels-list label input:checked + span {
  border-color: var(--main-color);
  font-weight: 500;
  opacity: 1;
}
.settings-menu-of-auto-generate .exam-settings-submit-btn {
  width: 100%;
  border-radius: 25px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  background: #eee;
  border: 0;
  transition: ease-in-out 0.2s all;
}
.settings-menu-of-auto-generate .exam-settings-submit-btn:hover {
  background: var(--main-color);
  color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.list-modal {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  z-index: 999999;
}
.list-modal .modal-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.list-modal .list-content, .list-modal .details-content {
  width: 40%;
  min-width: 320px;
  height: auto;
  max-height: 100vh;
  min-height: 300px;
  background: #fff;
  position: absolute;
  right: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  border-radius: 7px;
  animation: showModalOfBooksList 0.5s forwards;
}
@media screen and (max-width: 950px) {
  .list-modal .list-content, .list-modal .details-content {
    max-height: 90vh;
    width: 90%;
    overflow-y: auto;
  }
}
.list-modal .list-content h2, .list-modal .details-content h2 {
  font-weight: 500 !important;
  padding: 10px 15px;
}
.list-modal .list-content .choose-book-notice, .list-modal .details-content .choose-book-notice {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #fafafa;
  border-radius: 8px;
  margin: 0 20px;
}
.list-modal .list-content .choose-book-notice i, .list-modal .details-content .choose-book-notice i {
  color: #F7CA0D;
  margin-left: 10px;
  font-size: 20px;
}
.list-modal .list-content .video-title, .list-modal .details-content .video-title {
  border-bottom: 1px solid #eee;
}
.list-modal .resource-item-list {
  list-style: none;
  overflow-y: auto;
  max-height: calc(max(70vh, 285px) - 200px);
  margin-bottom: 0;
}
@media screen and (max-width: 950px) {
  .list-modal .resource-item-list {
    max-height: calc(max(70vh, 285px) - 220px);
  }
}
.list-modal .resource-item-list li {
  padding: 15px 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: ease-in-out all 0.3s;
}
.list-modal .resource-item-list li .details_container, .list-modal .resource-item-list li .details_btn {
  display: none;
}
.list-modal .resource-item-list li:first-child {
  border-top: 1px solid #eee;
  margin-top: 5px;
}
.list-modal .resource-item-list li .radio-input-container {
  margin-left: 10px;
}
.list-modal .resource-item-list li button, .list-modal .resource-item-list li a {
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
}
.list-modal .resource-item-list li button i, .list-modal .resource-item-list li a i {
  font-size: 20px;
  color: var(--main-color);
  margin-right: 5px;
}
.list-modal .resource-item-list li h2 {
  font-weight: 400 !important;
  font-size: 16px !important;
}
.list-modal .resource-item-list li.selected, .list-modal .resource-item-list li:hover {
  background: rgba(var(--main-color-rgb), 0.25);
}
.list-modal .resource-item-list li.selected .details_container, .list-modal .resource-item-list li.selected .details_btn, .list-modal .resource-item-list li:hover .details_container, .list-modal .resource-item-list li:hover .details_btn {
  display: flex;
}
.list-modal .resource-item-list-actions {
  margin-bottom: 20px;
}
.list-modal .resource-item-list-actions button {
  margin: 10px;
  border-radius: 25px;
  padding: 10px 30px;
  min-width: 30%;
  color: #aeaeae;
}
.list-modal .resource-item-list-actions button.save-books-btn, .list-modal .resource-item-list-actions button.save-video-btn {
  background: var(--main-color);
  color: #fff;
  border-color: var(--main-color);
}
.list-modal .video-player-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}
.list-modal .video-player-container iframe, .list-modal .video-player-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#publish-date-modal .inputs-container-of-publish-time label {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 7px 25px;
  cursor: pointer;
}
#publish-date-modal .inputs-container-of-publish-time label input {
  margin-left: 10px;
}
#publish-date-modal .inputs-container-of-publish-time label p {
  margin: 0;
}
#publish-date-modal .inputs-container-of-publish-time label.selected {
  background: rgba(var(--main-color-rgb), 0.55);
  font-weight: bold;
}
#publish-date-modal .calendar-container {
  margin: 7px 25px;
  border: 1px solid #ddd;
}
#publish-date-modal .datetimepicker.datetimepicker-inline {
  width: 95% !important;
  margin: 0 auto;
}
#publish-date-modal .datetimepicker.datetimepicker-inline table {
  width: 100%;
}

@keyframes showModalOfBooksList {
  from {
    top: -320px;
  }
  to {
    top: 50%;
  }
}
@keyframes showSettingsMenuOfAutoExams {
  from {
    left: min(-320px, -30%);
  }
  to {
    left: 0;
  }
}
.semesters-menu2 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  background: #fafafa;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  min-height: 150px;
  max-height: 80vh;
  width: max(300px, 50%);
  overflow-y: auto;
  padding: 15px;
}

.semesters-menu2 .year_elm {
  background: #fafafa;
  padding: 10px 15px;
  border-radius: 5px;
  margin-bottom: 7px;
}

.semesters-menu2 .year-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 5px 0;
  font-size: 16px !important;
  font-weight: 400 !important;
  cursor: pointer;
}

.semesters-menu2 .semesters_list_ {
  position: relative;
}

.semesters-menu2 .semesters_list_ li {
  list-style: none;
  position: relative;
}

.semesters-menu2 .semesters_list_ li a {
  color: var(--main-color);
  padding: 4px;
  padding-left: 23px;
  position: relative;
  display: inline-block;
}

.semesters-menu2 .semester-menu-label {
  margin: 10px 0 15px;
  font-weight: 500 !important;
}

#semester_menu_mask2 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
}

.semesters-menu2 .year-title.collapsed .fa-caret-down {
  display: block;
}

.semesters-menu2 .year-title .fa-caret-down {
  display: block;
}

.fa-caret-down:before {
  content: "\f0d7";
}

.fa-caret-up:before {
  content: "\f0d8";
}

.semesters-menu2 .year-title .arrow {
  font-size: 18px;
  color: var(--main-color);
}

.semesters-menu2 .semester_loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  transform: translate(-50%, -50%);
}

.boxgrid .disable-top {
  top: 0px !important;
  cursor: default !important;
}

.inactive-img-prev-courses {
  filter: grayscale(100%);
  opacity: 0.7;
  justify-content: center;
  display: flex;
  position: relative;
  width: 100%;
  height: 170px;
  top: 0px;
}

.small_img {
  position: relative !important;
  left: 111px !important;
  top: 3px !important;
  height: 90px !important;
  width: 90px !important;
  object-fit: contain !important;
  background-color: transparent !important;
}

.page-content .page-body .tall_box .inner .image_contener {
  justify-content: center;
  display: flex;
  position: relative;
  width: 100%;
  height: 170px;
  top: 0px;
}

.courses_item_box_warningOutOfTime_list_prev {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 95%;
  height: 12%;
  background-color: rgba(247, 202, 13, 0.25);
  position: relative;
  top: 10%;
  align-self: center;
  border-radius: 20px;
  position: relative;
}
.courses_item_box_warningOutOfTime_list_prev_icon {
  margin-left: 10px;
  color: #444;
}
.courses_item_box_warningOutOfTime_list_prev_text {
  margin: 0px;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #444 !important;
}
.courses_item_box_warningOutOfTime_list_prev_text_res {
  font-weight: 600 !important;
}
@media only screen and (max-width: 600px) {
  .courses_item_box_warningOutOfTime_list_prev_text_res {
    margin: 0px;
    font-weight: 600;
    display: block;
    text-align: center;
  }
}

.matching_question_container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1500px;
  position: relative;
  margin: 0 auto;
}
.matching_question_container .questions, .matching_question_container .answers {
  width: 45%;
  position: relative;
  z-index: 1;
}
.matching_question_container .questions .section-main-title-h2, .matching_question_container .answers .section-main-title-h2 {
  margin: 0;
  padding: 15px 5px 10px;
}
.matching_question_container ul {
  list-style-type: none;
  padding: 0;
}
.matching_question_container li {
  background: #fff;
  padding: 10px;
  margin: 5px 0;
  cursor: pointer;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 18px;
}
.matching_question_container li.selected {
  background: rgba(0, 123, 255, 0.15);
  border-color: #007bff;
}
.matching_question_container button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
}
.matching_question_container #result {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
}
.matching_question_container canvas {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  max-width: 100%;
  width: 200px;
}
.matching_question_container .canvas_container {
  position: relative;
  max-width: 200px;
  width: 100%;
  z-index: 0;
}
.matching_question_container img {
  max-width: 100% !important;
  max-height: 300px;
  object-fit: contain;
}

.cinspire-plus-container .cinspire-stats {
  background: #f6f6f6;
  border-radius: 5px;
  position: relative;
  padding: 20px 10px 15px;
}
.cinspire-plus-container .cinspire-stats .icon, .cinspire-plus-container .cinspire-stats .stat-content {
  display: table-cell;
  height: 100%;
}
.cinspire-plus-container .cinspire-stats .icon {
  width: 50px;
}
.cinspire-plus-container .cinspire-stats .icon img {
  background-color: #fff;
  width: 50px;
  height: 50px;
  padding: 10px;
  border-radius: 50%;
  object-fit: none;
}
.cinspire-plus-container .cinspire-stats .stat-content {
  width: calc(100% - 50px);
  padding: 0 14px;
  vertical-align: top;
}
.cinspire-plus-container .stat-content h3 {
  font-size: 18px;
  margin: 8px 0 5px;
}
.cinspire-plus-container strong {
  font-size: 15px;
}
.cinspire-plus-container td {
  text-align: center;
}
.cinspire-plus-container .center-formGroup {
  margin: auto;
  width: 50%;
  padding: 10px;
}
.cinspire-plus-container #success_partners_list_ul, .cinspire-plus-container .success_partners_list_ul {
  display: inline-flex;
  list-style-type: none;
}
.cinspire-plus-container #success_partners_list_ul li, .cinspire-plus-container .success_partners_list_ul li {
  border: 1px solid #eee;
  margin-inline: 5px;
  border-radius: 7px;
  padding: 10px;
}
.cinspire-plus-container #success_partners_list_ul li .p_logo, .cinspire-plus-container .success_partners_list_ul li .p_logo {
  display: flex;
  height: 150px;
  overflow: hidden;
  align-items: center;
}
.cinspire-plus-container #success_partners_list_ul li .p_logo img, .cinspire-plus-container .success_partners_list_ul li .p_logo img {
  max-height: 150px !important;
  border-radius: 0 !important;
  object-fit: contain;
}
.cinspire-plus-container #success_partners_list_ul li .more, .cinspire-plus-container .success_partners_list_ul li .more {
  display: block;
  cursor: pointer;
  text-align: left;
}
.cinspire-plus-container #success_partners_list_ul li .more a, .cinspire-plus-container .success_partners_list_ul li .more a {
  color: var(--main-color);
  margin-top: 5px;
  display: inline-block;
}
.cinspire-plus-container .partnerList {
  padding: 15px;
  display: inline;
}
.cinspire-plus-container .partner-lable {
  font-family: monospace;
  border-style: solid;
  border-width: 2px;
  font-style: bold;
  border-color: lightblue;
  border-radius: 25px !important;
}
.cinspire-plus-container div.scroll {
  margin: 4px, 4px;
  padding: 4px;
  width: auto;
  overflow-x: auto;
  white-space: nowrap;
}
.cinspire-plus-container ul {
  white-space: nowrap;
}

.assigned-points-error,
.available-points-error,
.pakacge-id-error,
.no-users-error {
  display: block;
  background: rgba(229, 48, 28, 0.5);
  color: #fff;
  position: relative;
  margin: 10px 20px;
  padding: 10px;
  border-radius: 3px;
  width: calc(100% - 40px);
}

.cinspire-table-container .circle-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-inline: 7px;
}
.cinspire-table-container div.dataTables_wrapper div.dataTables_length select {
  width: 100px !important;
  margin-right: 10px;
}
.cinspire-table-container .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: transparent !important;
  border-color: transparent !important;
}
.cinspire-table-container .dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: #fff !important;
  background: #fff !important;
  border-color: var(--main-color) !important;
  color: var(--main-color) !important;
  padding: 6px 12px !important;
}
.cinspire-table-container .dataTables_wrapper .dataTables_paginate .paginate_button.current, .cinspire-table-container .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: var(--main-color) !important;
  background: var(--main-color) !important;
  border-color: var(--main-color);
  color: #ffffff !important;
  box-shadow: none;
}
.cinspire-table-container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4;
}
.cinspire-table-container .dataTables_wrapper .dataTables_paginate .paginate_button.current, .cinspire-table-container .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  color: #ffffff;
  box-shadow: none;
}

.pdf-container {
  height: 900px;
  direction: ltr !important;
  width: 72.3%;
  position: relative;
  right: 28.6%;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-y: scroll;
  background-color: #f1f1f1;
}

.pdf-page {
  position: relative;
  top: 7%;
  margin-bottom: 7%;
  position: relative;
  display: flex;
  justify-content: center;
}

.drawing-canvas {
  position: absolute;
  top: 0;
  cursor: default;
}

.drawing-canvas.draw {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);'%3E%3Cpath d='M11.587 6.999H7.702a2 2 0 0 0-1.88 1.316l-3.76 10.342c-.133.365-.042.774.232 1.049l.293.293 6.422-6.422c-.001-.026-.008-.052-.008-.078a1.5 1.5 0 1 1 1.5 1.5c-.026 0-.052-.007-.078-.008l-6.422 6.422.293.293a.997.997 0 0 0 1.049.232l10.342-3.761a2 2 0 0 0 1.316-1.88v-3.885L19 10.414 13.586 5l-1.999 1.999zm8.353 2.062-5-5 2.12-2.121 5 5z'%3E%3C/path%3E%3C/svg%3E"), auto;
}

.drawing-canvas.erase {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);'%3E%3Cpath d='m2.586 15.408 4.299 4.299a.996.996 0 0 0 .707.293h12.001v-2h-6.958l7.222-7.222c.78-.779.78-2.049 0-2.828L14.906 3a2.003 2.003 0 0 0-2.828 0l-4.75 4.749-4.754 4.843a2.007 2.007 0 0 0 .012 2.816zM13.492 4.414l4.95 4.95-2.586 2.586L10.906 7l2.586-2.586zM8.749 9.156l.743-.742 4.95 4.95-4.557 4.557a1.026 1.026 0 0 0-.069.079h-1.81l-4.005-4.007 4.748-4.837z'%3E%3C/path%3E%3C/svg%3E"), auto;
}

.draggable-image {
  position: absolute;
  cursor: move;
}

.draggable-text {
  padding: 5px;
  cursor: move;
  width: auto !important;
  height: auto !important;
  resize: none !important;
  overflow: auto !important;
}

#image-input {
  margin-top: 10px;
}

.image-input-file {
  background-color: var(--main-color);
  width: 100%;
  height: 45px;
  padding: 5px;
  align-items: center;
  justify-content: center;
  display: flex;
  color: #fff;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

.input-action-con {
  z-index: 1000;
  position: fixed;
  top: 40px;
  right: 0px;
  width: 29%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  height: 95.6%;
  background-color: #f5f5f5;
  border: 1px solid #eee;
  border-bottom-color: transparent;
}

.labele-contract {
  border-radius: 7px;
  color: #444;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  align-self: flex-start;
}

.labele-contract-small {
  border-radius: 7px;
  color: #444;
  font-size: 12px;
  font-weight: 300;
  font-family: inherit;
  align-self: flex-start;
}

.image_text_input_con {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 25px 0px;
  flex-direction: column;
}

.text-tools-cont {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #d5d5d5;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-top: 10px;
  padding: 25px 0px;
  gap: 10px;
}

.draw-input-con {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #d5d5d5;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  padding: 25px 0px;
  gap: 10px;
}

.draw-tools-con {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.text-input-con {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  column-gap: 35px;
}

.add_text_div {
  left: 10px;
  height: 45px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  border-radius: 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  font-family: inherit;
  cursor: pointer;
}

.draggable-element {
  position: absolute;
  width: 150px;
  /* Default width */
  height: 150px;
  /* Default height */
  resize: both;
  overflow: auto;
  top: 100px;
  right: 10px;
}

.text-input {
  border-radius: 7px;
  width: 100%;
  padding: 10px;
  height: 45px;
}

.colors-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0px !important;
  border-radius: 20px;
  column-gap: 10px;
  width: 100%;
}

.text-input::after {
  content: attr(data-mode);
  display: block;
  font-size: 14px;
  color: #444;
}

.draggable-element img {
  width: 95%;
  height: 95%;
  object-fit: contain;
  cursor: move;
}

.lock-icon, .delete-icon {
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
  /* Hidden by default */
  cursor: pointer;
  font-size: 16px;
  color: var(--main-color);
  /* Replace with your $primary color */
  margin: 0;
  transition: top 0.3s ease;
  /* Smooth transition */
}

/* Show icons and move them on hover */
.icon-container:hover .lock-icon, .icon-container-red:hover .lock-icon, .icon-container-yellow:hover .lock-icon, .icon-container-green:hover .lock-icon, .icon-container-grey:hover .lock-icon, .icon-container-blue:hover .lock-icon,
.icon-container:hover .delete-icon,
.icon-container-red:hover .delete-icon,
.icon-container-yellow:hover .delete-icon,
.icon-container-green:hover .delete-icon,
.icon-container-grey:hover .delete-icon,
.icon-container-blue:hover .delete-icon {
  display: block;
  /* Show icons */
  top: 0px;
  /* Final position */
}

.delete-icon {
  left: 25px;
  color: #e5301c;
}

.draggable-element:hover .lock-icon,
.draggable-element:hover .delete-icon {
  display: block;
}

.draggable-element.resizable {
  resize: both;
  overflow: auto;
  border: 1px solid #ddd;
}

.resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: #000;
  cursor: se-resize;
}

.ind-color, .pen-check-box {
  list-style-type: none;
  margin: 0px;
  margin-right: 0px !important;
  font-size: 18px;
  width: 35px;
  display: flex;
  border-radius: 50%;
  height: 35px;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

.pen-check-box:first-child {
  margin: 0px 0px;
  margin-left: 0px;
}

.ind-color {
  border: 2px solid #ddd;
}

.pen-check-box {
  border: 3px solid #ddd;
}

.pen-check-box.selected {
  background-color: #ddd;
}

.ind-color.selected {
  border: 3px solid var(--main-color);
}

.ind-color:focus {
  border: 3px solid var(--main-color);
}

.pen-check-box:focus {
  background-color: #ddd;
}

.pen-check-box:hover {
  background-color: #ddd;
}

.ind-color:hover, .pen-check-box:hover {
  border: 3px solid var(--main-color);
}

.unselectable {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.unselectable::selection {
  background: transparent;
}

.loader, .file-loader {
  width: 18px;
  height: 18px;
  border: 1px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  margin: 0px 22px;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.file-loader {
  width: 35px;
  height: 35px;
  border: 3px solid var(--main-color);
  border-bottom-color: transparent;
  position: relative;
  top: 50%;
}

.loader-hide {
  display: none !important;
}

.save-pdf {
  position: fixed;
  top: 52px;
  left: 45%;
  /* display: block; */
  z-index: 10000;
}

.active-text-img {
  border: 1px solid var(--main-color);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 7px;
  padding: 4px 8px;
}

@media only screen and (max-width: 1500px) {
  .text-input-con {
    display: block;
  }

  .add_text_div {
    width: 100% !important;
  }

  .text-input {
    width: 100% !important;
    margin-bottom: 15px;
  }
}
@media only screen and (max-width: 1200px) {
  .colors-list {
    width: 100%;
  }

  .save-pdf {
    position: fixed;
    top: 52px;
    left: 35%;
    /* display: block; */
    z-index: 10000;
  }
}
/* Media Query for smaller screens */
@media only screen and (max-width: 950px) {
  .pdf-container {
    width: 100% !important;
    overflow-y: scroll;
    height: 400px;
    right: 0px !important;
  }

  .pdf-page {
    top: 4%;
  }

  .input-action-con {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 25px;
    align-items: center;
    height: 100%;
    position: static;
    top: 0px;
    right: 0px;
  }

  .text-input-con {
    margin-top: 0px;
  }

  .draw-tools-con {
    margin-top: 0px;
  }

  .text-tools-cont {
    display: flex;
    flex-direction: column;
    width: 92%;
    border-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-top: 10px;
    padding: 5px 0px;
    gap: 5px;
  }

  .draw-input-con {
    display: flex;
    flex-direction: column;
    width: 92%;
    border-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-top: 10px;
    padding: 5px 0px;
    gap: 5px;
  }

  .image_text_input_con {
    display: flex;
    width: 92%;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-top: 10px;
    padding: 5px 0px;
    gap: 5px;
  }

  .save-pdf {
    position: fixed;
    top: 52px;
    left: 30%;
    /* display: block; */
    z-index: 10000;
  }
}
@media only screen and (max-width: 500px) {
  .colors-list {
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .pdf-container {
    width: 100% !important;
    touch-action: pan-y;
    /* Allows vertical scrolling */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Enables smooth scrolling in iOS */
    overflow: scroll;
    height: 500px;
    right: 0px !important;
  }

  .pdf-page {
    top: 4%;
  }

  .input-action-con {
    width: 100%;
    display: flex;
    margin-top: 25px;
    align-items: center;
    height: 100%;
    position: static;
    top: 0px;
    right: 0px;
  }

  .text-input-con {
    margin-top: 0px;
  }

  .draw-tools-con {
    margin-top: 0px;
  }

  .text-tools-cont {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-top: 10px;
    padding: 5px 0px;
    gap: 5px;
  }

  .draw-input-con {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-top: 10px;
    padding: 5px 0px;
    gap: 5px;
  }

  .image_text_input_con {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-top: 10px;
    padding: 5px 0px;
    gap: 5px;
  }

  .save-pdf {
    position: fixed;
    top: 52px;
    left: 30%;
    /* display: block; */
    z-index: 10000;
  }
}
.registration-btn {
  width: 90%;
  display: flex;
  background-color: #F3DDFF;
  position: relative;
  margin: 10px 10px;
  height: 35px;
  display: flex;
  padding: 10px 25px;
  border-radius: 21px;
  color: #870fc7;
  font-size: 13px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
}

.registration-btn-icon {
  font-size: 17px;
}

.registration-wrapper {
  display: none;
  height: 380px;
  display: grid;
  grid-template-rows: 20% 60% 20%;
  justify-content: center;
  padding: 10px;
  flex-direction: column;
  transition: transform 0.5s ease;
  /* Smooth transition */
  animation-name: mymove;
  animation-duration: 1.2s;
}

@keyframes mymove {
  from {
    transform: translateX(40%);
  }
  to {
    transform: translateX(0);
  }
}
.icon-close.registration-wrapper-colse-icon {
  display: flex;
  padding-top: 15px;
  position: relative;
  right: 15px;
  justify-content: end;
  font-size: large;
  color: #aeaeae;
  cursor: pointer;
}

.registration-wrapper-text {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

.registration-wrapper-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

.registration-wrapper-actions-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 41px;
  border: 1px solid #aeaeae;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.registration-wrapper-actions-btn:active {
  border: 1px solid var(--main-color);
}
.registration-wrapper-actions-btn:hover {
  border: 1px solid var(--main-color);
}

@media screen and (max-width: 550px) {
  .feedback-poll-container {
    display: none !important;
  }
}
.feedback-poll-container .feedback-slider-mask {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.4);
}
.feedback-poll-container.slider-opened {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999999;
}
.feedback-poll-container.slider-opened .poll-button-container {
  z-index: 999999;
  pointer-events: none;
}
.feedback-poll-container.slider-opened .feedback-slider-mask {
  display: block;
}
.feedback-poll-container .poll-button-container {
  position: fixed;
  top: max(40%, 180px);
  left: 0;
  z-index: 99;
  transform: rotate(-90deg);
}
.feedback-poll-container .poll-button-container .poll-button {
  padding: 12px 16px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  background-color: #fff !important;
  background: linear-gradient(90deg, var(--main-color), rgba(var(--main-color-rgb), 0.5));
  position: absolute;
  left: 0;
  bottom: 0;
  transition: ease-in-out all 0.2s;
}
.feedback-poll-container .poll-button-container .poll-button:hover {
  padding-top: 15px;
}
.feedback-poll-container .poll-button-container i {
  margin-left: 20px;
  color: #fff;
  box-shadow: 0 0 0px 5px rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transform: rotate(90deg);
}
.feedback-poll-container .poll-button-container h4 {
  margin: 0;
  white-space: nowrap;
  color: #fff;
}
.feedback-poll-container .poll-slider-container {
  position: fixed;
  top: max(40%, 180px);
  left: 100px;
  z-index: 9999999999;
  background: #fff;
  border-radius: 7px;
  padding: 20px;
  display: none;
  animation: fadeInPollUp 1s ease-out forwards;
  min-width: 350px;
}
.feedback-poll-container .poll-slider-container.active {
  display: block;
}
.feedback-poll-container .poll-slider-container .poll-loading {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  border-radius: 7px;
  z-index: 1;
}
.feedback-poll-container .poll-slider-container p {
  opacity: 0.6;
  font-size: 12px;
}
.feedback-poll-container .poll-slider-container .close-poll {
  position: absolute;
  top: 15px;
  left: 20px;
  transition: all ease-in-out 0.2s;
}
.feedback-poll-container .poll-slider-container .close-poll:hover {
  opacity: 0.8;
}
.feedback-poll-container .poll-slider-container .feedback-value {
  padding: 6px 11px;
  font-weight: bold;
  border-radius: 3px;
  border: 1px solid #ddd;
  margin-inline-end: 5px;
  list-style: none;
  color: rgba(68, 68, 68, 0.8);
  transition: all ease-in-out 0.2s;
  flex: 1;
  text-align: center;
}
.feedback-poll-container .poll-slider-container .feedback-value.selected, .feedback-poll-container .poll-slider-container .feedback-value:hover {
  background: var(--main-color);
  border-color: var(--main-color);
}
.feedback-poll-container .poll-slider-container #feedback-description {
  resize: vertical;
  border-radius: 4px;
  width: 100%;
}
.feedback-poll-container .poll-slider-container .actions-container {
  display: flex;
  flex-direction: row-reverse;
}
.feedback-poll-container .poll-slider-container .actions-container button {
  margin-right: 15px;
  border-radius: 25px;
  padding: 8px 20px;
  border: 1px solid #444;
  transition: all ease-in-out 0.2s;
}
.feedback-poll-container .poll-slider-container .actions-container button:hover {
  opacity: 0.8;
}
.feedback-poll-container .poll-slider-container .actions-container button.submit {
  border-color: var(--main-color);
  background: var(--main-color);
  color: #fff;
}
.feedback-poll-container .poll-slider-container .form-icon-container {
  box-shadow: 0 0 0px 5px rgba(var(--main-color-rgb), 0.3);
  border-radius: 50%;
  width: 33px;
  height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.feedback-poll-container .poll-slider-container .form-icon-container span.icon-check {
  position: absolute;
  right: 6px;
  top: 5px;
  font-size: 10px;
  width: 12px;
  height: 12px;
  background: #fff;
  color: var(--main-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-weight: bold;
}
.feedback-poll-container .poll-slider-container .form-icon {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--main-color);
  color: #fff;
}
.feedback-poll-container .poll-slider-container:before {
  position: absolute;
  font-family: "icomoon" !important;
  content: "\eb69";
  top: 10px;
  left: 70px;
  font-size: 5em;
  opacity: 0.16;
  color: var(--main-color);
}

@keyframes fadeInPollUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Base Styles */
.mt-3 {
  margin-top: 15px;
}

.mt-4 {
  margin-top: 20px;
}

.mb-3 {
  margin-bottom: 15px;
}

.text-center {
  text-align: center;
}

.text-danger {
  color: var(--danger-color);
}

/* Form Elements */
.form-group {
  margin-bottom: 0;
}

.panel.panel-default {
  border: unset;
}

.form-control {
  height: 34px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
}

.form-control.not-editable {
  background-color: var(--bg-light);
  cursor: not-allowed;
}

.progress {
  background-color: rgba(var(--main-color-rgb), 0.6);
}

/* Panel Styles */
.panel {
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}

.panel-heading {
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
}

.panel-title {
  margin: 0;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 600;
}

/* Wizard Progress */
.wizard-progress {
  padding: 20px;
  border: 1px solid var(--primary-color);
  border-top: transparent;
  border-right: transparent;
  border-left: transparent;
}

.wizard-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.wizard-step {
  text-align: center;
  opacity: 0.5;
}

.wizard-step.active {
  opacity: 1;
}

.wizard-step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 5px;
}

.wizard-step-label {
  font-size: 12px;
}

/* Navigation Tabs */
.nav-tabs {
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.nav-tabs .nav-item {
  flex: 1;
  text-align: center;
  min-width: auto;
}

.nav-tabs .nav-link {
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 12px 20px;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  font-size: 14px;
  border-radius: 25px;
  background-color: var(--bg-light);
  transition: all 0.3s ease;
  margin: 0 5px;
}

.nav-tabs .nav-link.active {
  color: var(--white-color);
  background: var(--primary-color);
  border-color: var(--primary-color);
}

/* Table Styles */
.table-responsive {
  width: 100%;
  margin: 0;
}

.table {
  width: 100%;
  margin-bottom: 0;
}

.table th {
  background-color: var(--bg-light);
  font-weight: 600;
}

.table td {
  vertical-align: middle;
}

/* Status Indicators */
.status-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-left: 10px;
  display: inline-block;
}

.status-indicator.unmatched {
  background-color: var(--danger-color);
}

.status-indicator.pending {
  background-color: var(--warning-color);
}

.status-indicator.confirmed {
  background-color: var(--success-color);
}

/* Buttons */
.wizard-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0px 25px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background-color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

/* RTL Support */
.rtl .wizard-buttons {
  flex-direction: row-reverse;
}

.rtl .right-buttons {
  margin-left: auto;
  margin-left: 0;
}

.rtl .dropdown-menu {
  text-align: right;
  right: auto;
  left: 0;
}

/* Schedule Table */
.schedule-container {
  position: relative;
  margin: 20px 0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.schedule-wrapper {
  overflow-x: auto;
  max-height: 600px;
  position: relative;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white-color);
}

.schedule-table th,
.schedule-table td {
  border: 1px solid var(--border-color);
  padding: 8px;
  text-align: center;
  min-width: 100px;
}

/* Filters */
.filters-container {
  background: var(--bg-light);
  padding: 15px 0px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* Pagination */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-info {
  margin-right: 15px;
}

.page-indicator {
  display: inline-block;
  padding: 0 10px;
  line-height: 30px;
  vertical-align: middle;
}

.btn-icon {
  border: none;
  background: none;
  padding: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-icon i {
  font-size: 16px;
}

/* Alerts */
.alert {
  padding: 15px;
  margin-bottom: 0;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-warning {
  color: var(--warning-color);
  background-color: var(--bg-warning);
  border-color: var(--border-warning);
}

/* Update the classera-day-container styles */
.classera-day-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Update select container styles */
.classera-day-container select {
  flex: 1;
  min-width: 0;
  /* Prevents select from overflowing */
}

/* Add styles for the select wrapper */
.select-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Table cell styles to ensure proper layout */
.table td {
  vertical-align: middle;
  padding: 8px;
}

/* Make sure the table cells can handle the flex layout */
.lessons-table-custom td > div {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.lessons-table-custom td > i {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.lessons-table-custom td > button {
  width: 90%;
  height: 55px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

/* Schedule Overview Styles */
.schedule-overview {
  padding: 20px;
}

.stat-box {
  background: var(--bg-light);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stat-label {
  color: var(--text-color);
  font-size: 14px;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.section-schedule {
  background: var(--white-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.section-schedule h5 {
  color: var(--primary-color);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
}

.section-schedule table {
  margin-bottom: 0;
}

.section-schedule th {
  background: var(--bg-light);
  font-weight: 600;
}

.section-schedule td {
  vertical-align: middle;
}

div#scheduleFileContainer {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 25px;
  width: auto;
  position: relative;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border: 1px solid #aeaeae;
  border-radius: 8px;
  padding: 20px;
}

.file-upload-actions {
  justify-content: flex-end;
  display: flex;
}

.counter-span-style {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #eee;
  border-radius: 50%;
}

.nav-item.active .counter-span-style {
  background: var(--main-color);
}

button#uploadBtn {
  border-radius: 8px;
  background: transparent !important;
  box-shadow: unset;
  border: 2px solid;
  width: 150px;
  height: 50px;
  color: #444;
  font-weight: 600;
}

.file-upload-description-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.file-upload-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

span#uploadFileDescription {
  font-size: large;
  font-weight: 600;
}

.file-upload-icon {
  font-size: 30px;
}

.file-upload-icon-red {
  color: #e5301c;
  font-size: 20px;
  cursor: pointer;
}

.file-upload-success-icon.icon-check {
  font-size: 19px;
  color: var(--main-color);
}

.uploaded-file-container {
  grid-template-columns: auto 1fr;
  gap: 20px;
  display: grid;
  align-items: center;
  background: #eee;
  padding: 10px;
  border-radius: 8px;
}

.file-upload-filename {
  font-weight: 600;
}

.file-upload-size {
  color: #aeaeae;
}

.uploaded-file-details, .uploaded-file-success {
  display: flex;
  gap: 20px;
  align-items: center;
}

.uploaded-file-success {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: end;
}

@media (max-width: 768px) {
  div#scheduleFileContainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 20px;
  }

  .file-upload-description-container {
    padding: 10px;
  }
}
@media (max-width: 576px) {
  .uploaded-file-container {
    gap: 20px;
    grid-template-columns: unset;
  }
}
.status-indicator {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-indicator.pending {
  color: #F7CA0D;
}

.status-indicator.confirmed {
  color: #66BB6A;
}

.status-indicator.unmatched {
  color: #e5301c;
}

.ascLabel-td, .classeraLabel-td {
  margin-right: 13px;
  font-size: large;
}

input#courseFilter, input#sectionFilter, input#teacherFilter, input#lessonFilter {
  border-radius: 8px;
}

div#filter-div {
  margin: 25px;
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25PX;
  flex-wrap: wrap;
}

.section-filter, .teacher-filter, .lecture-filter {
  flex: 1;
  height: 100%;
  border-radius: 8px;
  padding-right: 25px;
  min-width: 200px;
}

div#timeSlotsTableContainer {
  display: grid;
  grid-template-columns: 130px 1fr;
  padding: 25px;
  grid-template-rows: 1fr;
  overflow: scroll;
  gap: 15px;
  max-height: 500px;
}

div#sectionContainer {
  padding-top: 130px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.section-div-asc {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(238, 238, 238, 0.5);
  border-radius: 8px;
  text-align: center;
  padding: 10px;
  font-weight: 600;
}

div#mainTableContainer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.day-div {
  min-width: 200px;
  min-height: 111px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: rgba(238, 238, 238, 0.5);
  border-radius: 8px;
}

.id-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #eee;
  border-radius: 8px;
}

.id-item {
  margin: 0px 50px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contentAndHeaderContainer {
  display: flex;
  gap: 20px;
  flex-direction: column;
}

.contentContainer {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  /* position: absolute; */
  /* top: 0px; */
}

.card-div-asc {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(238, 238, 238, 0.5);
  position: absolute;
  top: 0px;
  border-radius: 8px;
}

.time-from-asc {
  width: max-content;
}

.card-icon-asc {
  margin: 8px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.card-lecture-title-asc {
  font-weight: 600;
}

.card-info-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Style for the custom select dropdowns */
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #858585;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  /* Add a custom arrow using a pseudo-element */
}
.custom-select:focus {
  border-color: var(--main-color);
  outline: none;
  box-shadow: 0 0 8px rgba(var(--main-color-rgb), 0.6);
}
.custom-select::after {
  content: "▼";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #aeaeae;
}

/* Style for the options */
.custom-select option {
  padding: 10px 12px;
  margin: 4px 0;
  border-bottom: 1px solid #f1f1f1;
}
.custom-select option:hover {
  background-color: #f6f8f9;
}

.no-data-flex {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 100px;
  background-color: #eee;
  border-radius: 4px;
  color: #aeaeae;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden !important;
}

.exams-monitoring-dash {
  display: grid;
  grid-template-columns: 48.5% 48.5%;
  justify-content: center;
  gap: 25px;
}

.flitter_inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}

.exams-monitoring-title {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
  margin-left: 5px;
  margin-bottom: 25px;
}

.exam-row {
  font-size: large;
}

.exam-column {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 7px;
  padding: 25px 15px;
  position: relative;
}

.exam-title {
  font-size: 19px;
  font-weight: bold;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.exam-card {
  display: grid;
  grid-template-columns: auto auto auto;
  height: 100%;
  width: 100%;
  grid-template-rows: 1fr 1fr;
  gap: 45px 10px;
  margin: 10px 0px;
}

.exam-column-small {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
}

.icon-placeholder {
  font-size: 24px;
  margin-bottom: 10px;
}

.statistics-container {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 5px;
}

.statistics-label {
  font-size: 12px;
}

.numbers-exames {
  font-size: 19px;
  font-weight: bold;
}

.numbers-exames-red {
  font-size: 18px;
  color: #ff8b8b;
  font-weight: 600;
}

.icon-container, .icon-container-red, .icon-container-yellow, .icon-container-green, .icon-container-grey, .icon-container-blue {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background-color: antiquewhite;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.icon-container-blue {
  background-color: #CDF9FF;
  color: #36cbdf;
}

.icon-container-grey {
  background-color: #e9e9e9;
  color: #808080;
}

.icon-container-green {
  background-color: #CDFFD3;
  color: #57ec69;
}

.icon-container-yellow {
  background-color: #FFF2CD;
  color: #ffc107;
}

.icon-container-red {
  background-color: #FFDADA;
  color: #ff6363;
}

.school-names-list {
  display: none;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 10;
  background: #fafafa;
  overflow-y: scroll;
  padding: 30px;
  border-radius: 7px;
  gap: 30px;
  flex-direction: column;
}

@media (max-width: 1750px) {
  .exam-card {
    gap: 45px 0px;
  }

  .exam-column-small {
    gap: 5px;
  }

  .exam-column {
    padding: 25px 5px;
  }
}
@media (max-width: 1550px) {
  .exams-monitoring-dash {
    grid-template-columns: 1fr;
  }

  .exam-card {
    gap: 45px 10px;
  }

  .exam-column-small {
    gap: 10px;
  }

  .exam-column {
    padding: 25px 15px;
  }
}
@media (max-width: 650px) {
  .exam-card {
    grid-template-columns: 1fr 1fr;
    gap: 45px 5px;
  }

  .numbers-exames {
    font-size: 20px;
    font-weight: bold;
  }

  .numbers-exames-red {
    font-size: 20px;
    font-weight: bold;
  }
}
@media (max-width: 400px) {
  .exam-card {
    grid-template-columns: 1fr;
    gap: 45px 5px;
  }
}
.school-names-list-title {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  gap: 20px;
}

.school-names-list-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.school-names-list-close {
  font-size: 27px;
  cursor: pointer;
}

.school-name {
  border: 1px solid #ccc;
  border-top: transparent;
  border-left: transparent;
  border-right: transparent;
  padding-bottom: 10px;
}

.additional-checkboxes {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.checkboxes-cont {
  flex-wrap: wrap;
}

.title-Ai-con-cont {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  gap: 10px;
  padding: 0px 28px;
}

.Ai-Setting-contenr {
  display: grid;
  grid-template-rows: 40px 1fr;
  flex: 1;
  margin: 10px 10px;
  flex-direction: column;
  padding: 10px;
  border-radius: 7px;
  border: 1px solid #eee;
  background-color: #fff;
}

.title-Ai-con {
  color: #444;
  font-size: larger;
  font-weight: 700;
}

.icon-set {
  color: var(--main-color);
  font-size: 17px;
}

.checkbox-contener {
  width: 100%;
  position: relative;
  left: 23px;
  margin: 0px 5px;
}

.checkbox-contener-upload {
  width: 100%;
  position: relative;
  left: 35px;
  margin: 0px 5px;
}

.align-xsera {
  position: relative;
  right: 11px;
  margin: 0px 7px !important;
}

@media only screen and (max-width: 500px) {
  .Ai-Setting-contenr {
    padding: 0px 0px;
  }
}
.container-of-future-is-here {
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  border-radius: 8px;
  padding: 10px 20px;
  padding-right: 140px;
  position: relative;
  margin: 20px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 100px;
  min-height: 100px;
}
@media screen and (min-width: 1050px) {
  .container-of-future-is-here.scrolling {
    position: fixed;
    top: 50px;
    z-index: 9;
    left: 70px;
    box-shadow: unset;
    border-radius: 50px;
    min-width: 100px;
    min-height: 100px;
    padding-right: 20px;
    padding-left: 20px;
    margin: 0;
  }
  .container-of-future-is-here.scrolling:hover {
    transition: ease-in-out 0.3s all;
    padding-left: 130px;
    padding-right: 20px;
    width: unset;
    height: unset;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid #fff;
  }
  .container-of-future-is-here.scrolling:hover .future-content, .container-of-future-is-here.scrolling:hover .future-arrow-btn {
    display: flex;
  }
  .container-of-future-is-here.scrolling .future-content, .container-of-future-is-here.scrolling .future-arrow-btn {
    display: none;
  }
  .container-of-future-is-here.scrolling .hide-when-scrolling {
    display: none;
  }
  .container-of-future-is-here.scrolling .image-container {
    right: unset;
    left: -6px;
    border-radius: 50%;
  }
}
.container-of-future-is-here h3 {
  margin: 13px 10px;
  margin-right: 15px;
  font-size: 3.5em;
  font-weight: 400;
}
@media screen and (min-width: 1050px) {
  .container-of-future-is-here h3 {
    margin-right: 15px;
  }
}
.container-of-future-is-here h3 p {
  margin: 5px 0 0;
  margin-right: 10px;
  font-size: 17px;
}
.container-of-future-is-here .future-arrow-btn {
  padding: 1px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  border-radius: 25px;
  border: 1px solid #fff;
  border-width: 0.8px;
  margin-left: 5px;
}
.container-of-future-is-here .future-arrow-btn i {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border: 1px solid #fff;
  border-width: 0.8px;
}
.container-of-future-is-here .future-arrow-btn h5 {
  font-weight: 400;
}
.container-of-future-is-here .image-container {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
  height: 110px;
}
.container-of-future-is-here .sera-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
.container-of-future-is-here lottie-player {
  position: absolute;
  left: -10px;
  top: -10px;
  max-width: calc(100% + 20px);
  max-height: calc(100% + 20px);
}
@media screen and (max-width: 560px) {
  .container-of-future-is-here {
    padding-right: 60px;
  }
  .container-of-future-is-here .future-content {
    flex-wrap: wrap;
  }
  .container-of-future-is-here h3 {
    font-size: 18px;
  }
  .container-of-future-is-here h3 p {
    margin: 0 !important;
    font-size: 13px;
  }
  .container-of-future-is-here h5 {
    font-size: 13px;
  }
  .container-of-future-is-here .image-container {
    width: 65px;
    height: 31px;
    right: 0;
    top: 34px;
  }
  .container-of-future-is-here .sera-icon {
    right: 17px;
    width: 45px;
  }
}

.modal-of-futures {
  position: fixed;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-of-futures .modal-mask {
  background: rgba(0, 0, 0, 0.35);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.modal-of-futures .modal-future-content {
  border-radius: 7px;
  padding: 25px;
  color: #fff;
  background: #fff linear-gradient(0, rgba(var(--main-color-rgb), 0.5) 0%, rgba(var(--main-color-rgb), 0.75) 75%, rgba(var(--main-color-rgb), 1) 100%);
  width: max(320px, 45%);
  height: auto;
  margin: 10px;
  min-height: 300px;
  max-height: calc(100vh - 40px);
  z-index: 1;
  animation: FutureModalAnimation 0.91s ease-in forwards;
  opacity: 0;
}
.modal-of-futures .hello-section {
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  padding: 7px 10px;
  border-radius: 50px;
  margin: 10px 0 20px;
  font-size: 17px;
}
.modal-of-futures .hello-section p {
  margin: 0;
  font-weight: 300;
}
.modal-of-futures .hello-section img {
  width: 40px;
  margin-left: 10px;
}
.modal-of-futures .futures-list .future-link {
  border: 1px solid #fff;
  border-radius: 25px;
  text-align: center;
  font-weight: 400;
  padding: 10px;
  margin: 10px 0 20px;
  display: block;
  color: #fff;
  transition: all 0.3s ease-in-out;
}
.modal-of-futures .futures-list .future-link.loading {
  cursor: not-allowed;
}
.modal-of-futures .futures-list .future-link .future-link-loader {
  display: none;
  margin-inline: 10px;
  vertical-align: middle;
}
.modal-of-futures .futures-list .future-link.loading .future-link-loader {
  display: inline-block;
}
.modal-of-futures .futures-list .future-link:hover {
  opacity: 0.9;
}

@keyframes FutureModalAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*!
 * ClockPicker v{package.version} for Bootstrap (http://weareoutman.github.io/clockpicker/)
 * Copyright 2014 Wang Shenwei.
 * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
 */
.clockpicker .input-group-addon {
  cursor: pointer;
}

.clockpicker-moving {
  cursor: move;
}

.clockpicker-align-left.popover > .arrow {
  right: 25px !important;
}

.clockpicker-align-top.popover > .arrow {
  top: 17px;
}

.clockpicker-align-right.popover > .arrow {
  right: auto !important;
  left: 25px !important;
}

.clockpicker-align-bottom.popover > .arrow {
  top: auto;
  bottom: 6px;
}

.clockpicker-popover .popover-title {
  background-color: #fff;
  color: #999;
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
}

.clockpicker-popover .popover-title span {
  cursor: pointer;
}

.clockpicker-popover .popover-content {
  background-color: #f8f8f8;
  padding: 12px;
}

.popover-content:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.clockpicker-plate {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  overflow: visible;
  position: relative;
  /* Disable text selection highlighting. Thanks to Hermanya */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.clockpicker-canvas,
.clockpicker-dial {
  width: 200px;
  height: 200px;
  position: absolute;
  left: -1px;
  top: -1px;
}

.clockpicker-minutes {
  visibility: hidden;
}

.clockpicker-tick {
  border-radius: 50%;
  color: #666;
  line-height: 26px;
  text-align: center;
  width: 26px;
  height: 26px;
  position: absolute;
  cursor: pointer;
}

.clockpicker-tick.active,
.clockpicker-tick:hover {
  background-color: #c0e5f7;
  background-color: rgba(0, 149, 221, 0.25);
}

.clockpicker-button {
  background-image: none;
  background-color: #fff;
  border-width: 1px 0 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin: 0;
  padding: 10px 0;
}

.clockpicker-button:hover {
  background-image: none;
  background-color: #ebebeb;
}

.clockpicker-button:focus {
  outline: none !important;
}

.clockpicker-dial {
  -webkit-transition: -webkit-transform 350ms, opacity 350ms;
  -moz-transition: -moz-transform 350ms, opacity 350ms;
  -ms-transition: -ms-transform 350ms, opacity 350ms;
  -o-transition: -o-transform 350ms, opacity 350ms;
  transition: transform 350ms, opacity 350ms;
}

.clockpicker-dial-out {
  opacity: 0;
}

.clockpicker-hours.clockpicker-dial-out {
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}

.clockpicker-minutes.clockpicker-dial-out {
  -webkit-transform: scale(0.8, 0.8);
  -moz-transform: scale(0.8, 0.8);
  -ms-transform: scale(0.8, 0.8);
  -o-transform: scale(0.8, 0.8);
  transform: scale(0.8, 0.8);
}

.clockpicker-canvas {
  -webkit-transition: opacity 175ms;
  -moz-transition: opacity 175ms;
  -ms-transition: opacity 175ms;
  -o-transition: opacity 175ms;
  transition: opacity 175ms;
}

.clockpicker-canvas-out {
  opacity: 0.25;
}

.clockpicker-canvas-bearing,
.clockpicker-canvas-fg {
  stroke: none;
  fill: #0095dd;
}

.clockpicker-canvas-bg {
  stroke: none;
  fill: #c0e5f7;
}

.clockpicker-canvas-bg-trans {
  fill: rgba(0, 149, 221, 0.25);
}

.clockpicker-canvas line {
  stroke: #0095dd;
  stroke-width: 1;
  stroke-linecap: round;
  /*shape-rendering: crispEdges;*/
}

.clockpicker-button.am-button {
  margin: 1px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.clockpicker-button.pm-button {
  margin: 1px 1px 1px 136px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.swal2-popup.swal2-modal.swal2-show {
  display: grid !important;
  width: 440px !important;
  min-height: 220px !important;
  padding: 20px !important;
}

@media only screen and (max-width: 500px) {
  .swal2-popup.swal2-modal.swal2-show {
    width: 320px !important;
    min-height: 220px !important;
  }
}
div:where(.swal2-container) div:where(.swal2-html-container) {
  z-index: 1;
  justify-content: center;
  margin: 0;
  padding: var(--swal2-html-container-padding);
  overflow: auto;
  color: inherit;
  font-size: 1.425em !important;
  font-weight: normal;
  line-height: normal;
  text-align: center;
  word-wrap: break-word;
  word-break: break-word;
  cursor: initial;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
  border-radius: var(--swal2-confirm-button-border-radius);
  background: initial;
  background-color: var(--main-color) !important;
  box-shadow: var(--main-color) !important;
  color: var(--swal2-confirm-button-color) !important;
  font-size: 1em !important;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover {
  background-color: color-mix(in srgb, var(--main-color), var(--swal2-action-button-hover)) !important;
}

.swal2-modal .swal2-styled {
  width: 180px !important;
  height: 42px;
  font-size: 14px !important;
}

div:where(.swal2-icon) .swal2-icon-content {
  display: flex;
  align-items: center;
  font-size: 0.75em !important;
}

.digital-repository-wrapper .table.modern-report-table {
  background: transparent;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0 10px;
  margin-top: 18px;
}
.digital-repository-wrapper .table.modern-report-table tbody {
  background: transparent;
}
.digital-repository-wrapper .table.modern-report-table tbody tr:hover {
  background: #f6f8f9;
}
.digital-repository-wrapper .table.modern-report-table tbody tr td {
  background: transparent;
  padding: 12px 10px;
}
.digital-repository-wrapper .table.modern-report-table thead tr th {
  text-align: center;
  background-color: #f6f8f9;
  font-weight: bold;
  padding: 8px 10px;
}
.digital-repository-wrapper .table.modern-report-table tbody tr td, .digital-repository-wrapper .table.modern-report-table thead tr th {
  border: 1px solid #eee !important;
  border-top: 1px solid #d5d5d5;
  border-bottom: 1px solid #d5d5d5;
  vertical-align: middle;
  font-size: 15px;
  color: #444;
}
.digital-repository-wrapper .table.modern-report-table td:first-child, .digital-repository-wrapper .table.modern-report-table th:first-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.digital-repository-wrapper .table.modern-report-table td:last-child, .digital-repository-wrapper .table.modern-report-table th:last-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.digital-repository-wrapper .table.modern-report-table tr.empty-row td {
  border-radius: 8px;
}
.digital-repository-wrapper .table-responsive .row.hidden-print:not(.flex) {
  display: none;
}
.digital-repository-wrapper .table-responsive .export-excel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.digital-repository-wrapper .table-responsive .export-excel-btn .icon-download {
  font-size: 18px;
  margin-bottom: 2px;
  transition: color 0.2s;
  color: var(--main-color);
}
.digital-repository-wrapper .table-responsive .export-excel-btn span {
  font-size: 15px;
  font-weight: 500;
  color: #444;
}
.digital-repository-wrapper .table-responsive .export-excel-btn:hover {
  text-decoration: none;
}
.digital-repository-wrapper .table-responsive .export-excel-btn:hover .icon-download, .digital-repository-wrapper .table-responsive .export-excel-btn:hover span {
  color: #19b0e7;
}
.digital-repository-wrapper form.modern-form {
  background: transparent;
}
.digital-repository-wrapper form.modern-form .form-group {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 20px;
}
.digital-repository-wrapper form.modern-form .form-group .input {
  width: 100%;
}
.digital-repository-wrapper form.modern-form .form-group input {
  border-radius: 10px;
  min-height: 40px;
  font-size: 12px;
}
.digital-repository-wrapper form.modern-form .form-group input.btn[type=submit] {
  background: transparent;
  color: var(--main-color);
  border-color: var(--main-color);
  margin-bottom: 0;
}
.digital-repository-wrapper form.modern-form .form-group input.btn[type=submit]:hover {
  background: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: #fff !important;
}
.digital-repository-wrapper form.modern-form .form-group .clearDatepicker {
  font-size: 12px;
  line-height: 1.2;
}
.digital-repository-wrapper form.modern-form .form-group .control-label {
  text-transform: capitalize;
  color: inherit;
}

.preparation-page {
  background-color: #fff;
}
.preparation-page .preparation-table-page {
  padding: 15px 0 48px 0;
  font-family: "Cairo", "Tajawal", Arial, sans-serif;
  color: #1ca6c6;
}
.preparation-page .page-title-container {
  max-width: 1000Px;
  margin: auto;
  margin-bottom: 30px;
}
.preparation-page .page-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  color: #51ddf7;
}
.preparation-page .page-subtitle {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-top: 5px;
  color: #888;
}
.preparation-page .top-actions-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto 18px auto;
  flex-wrap: wrap;
  gap: 10px;
}
.preparation-page .export-btns-container {
  display: flex;
  gap: 12px;
}
.preparation-page .export-btn {
  background: #51ddf7;
  color: #fff;
  padding: 11px 22px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.07rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(81, 221, 247, 0.1);
  transition: background 0.18s, box-shadow 0.18s;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
}
.preparation-page .export-btn:hover {
  background: #1ca6c6;
  box-shadow: 0 4px 16px rgba(81, 221, 247, 0.13);
}
.preparation-page .search-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.preparation-page .search-input {
  width: 260px;
  padding: 10px 36px 10px 14px;
  border: 1.5px solid #51ddf7;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border 0.2s;
  background: #fff;
  color: #1a3a4a;
}
.preparation-page .search-input:focus {
  border-color: #1ca6c6;
}
.preparation-page .search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.preparation-page .table-responsive {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 0 0 10px 0;
  overflow-x: auto;
}
.preparation-page .prep-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 1.05rem;
  min-width: 600px;
}
.preparation-page .prep-table thead tr {
  background: #eafaff;
}
.preparation-page .prep-table th, .preparation-page .prep-table td {
  padding: 14px 12px;
  border-bottom: 1.5px solid #c6f2fa;
}
.preparation-page .prep-table th {
  color: #1ca6c6;
  font-weight: 700;
  font-size: 1.07rem;
  letter-spacing: 0.2px;
}
.preparation-page .prep-table tbody tr:last-child td {
  border-bottom: none;
}
.preparation-page .lesson-title-cell {
  color: #1ca6c6;
  font-weight: 600;
  max-width: 320px;
  word-break: break-word;
  width: 60%;
}
.preparation-page .percentage-badge {
  background: #eafaff;
  color: #1ca6c6;
  border-radius: 6px;
  padding: 4px 14px;
  font-weight: 700;
  font-size: 1rem;
  display: inline-block;
  min-width: 48px;
  text-align: center;
}
.preparation-page .progress-bar-table {
  width: 100%;
  background: #eafaff;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  min-width: 80px;
  max-width: 180px;
}
.preparation-page .progress-table {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #51ddf7 60%, #1ca6c6 100%);
  transition: width 0.7s cubic-bezier(0.4, 2, 0.6, 1);
}
@media (max-width: 800px) {
  .preparation-page .prep-table, .preparation-page .prep-table thead, .preparation-page .prep-table tbody, .preparation-page .prep-table th, .preparation-page .prep-table td, .preparation-page .prep-table tr {
    display: block;
  }
  .preparation-page .prep-table thead {
    display: none;
  }
  .preparation-page .prep-table tr {
    margin-bottom: 18px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
    padding: 8px 0;
  }
  .preparation-page .prep-table td {
    padding: 10px 16px;
    border: none;
    position: relative;
  }
  .preparation-page .prep-table td:before {
    content: attr(data-label);
    font-weight: 700;
    color: #1ca6c6;
    display: block;
    margin-bottom: 4px;
    font-size: 0.98rem;
  }
  .preparation-page .table-responsive {
    padding: 0 0 0 0;
  }
  .preparation-page .progress-info {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .preparation-page .progress-bar-table {
    width: 100%;
    max-width: none;
  }
}
.preparation-page ::-webkit-scrollbar {
  height: 8px;
  background: #eaf6fb;
  border-radius: 6px;
}
.preparation-page ::-webkit-scrollbar-thumb {
  background: #c6eaf3;
  border-radius: 6px;
}
.preparation-page .sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color 0.15s;
}
.preparation-page .sortable.active {
  color: #1ca6c6;
}
.preparation-page .sort-arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin-right: 2px;
  margin-left: 2px;
}
.preparation-page .sort-arrow:after {
  content: "";
  display: inline-block;
  border: 5px solid transparent;
  border-top-color: #b3c6d6;
  margin-left: 2px;
  vertical-align: middle;
  transition: transform 0.2s;
}
.preparation-page .sortable.sorted-asc .sort-arrow:after {
  border-bottom: none;
  border-top: 6px solid #1ca6c6;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-radius: 2px;
  transform: rotate(180deg);
}
.preparation-page .sortable.sorted-desc .sort-arrow:after {
  border-top: none;
  border-bottom: 6px solid #1ca6c6;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-radius: 2px;
  transform: rotate(0deg);
}
.preparation-page .progress-cell {
  min-width: 200px;
}
.preparation-page .progress-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
.preparation-page .percentage-badge {
  min-width: 60px;
  text-align: center;
}
.preparation-page .progress-bar-table {
  flex: 1;
  margin: 0;
}

.editor-action-btn {
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #444;
  border: transparent !important;
}
.editor-action-btn.selected {
  background-color: #666;
  color: #fff;
}
.editor-action-btn.disabled {
  opacity: 0.5;
  cursor: auto;
}

.color-picker-wrapper {
  position: relative;
  min-width: 30px;
  height: 30px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-picker-wrapper input {
  opacity: 0;
  width: 100%;
  height: 100%;
  min-width: 31px;
  position: absolute;
  top: 0;
  left: 0;
}
.color-picker-wrapper > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 30px;
  height: 100%;
  border-radius: 10px;
  background-color: #ff0000;
}
.color-picker-wrapper > div.selected::before {
  content: "\f00c";
  font-family: FontAwesome;
  color: #fff;
}

.action-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.action-btn-wrapper-checkbox {
  display: grid;
  align-items: center;
  padding: 0px 5px;
  flex-wrap: wrap;
  gap: 5px 5px;
}

.header-text-label {
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 15px;
  display: block;
  color: #a0a0a0;
}

#custom_header_color, #custom_footer_color {
  width: 35px;
  height: 35px;
  min-height: 35px !important;
  padding: 17.5px;
  content: unset;
  cursor: pointer;
}
#custom_header_color:focus, #custom_footer_color:focus {
  border: transparent !important;
}

.header-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  cursor: pointer;
  background: rgba(80, 222, 247, 0.2);
  padding: 5px 15px;
  border-radius: 5px;
}

#header-slider {
  font-size: 22px;
}

#footer-slider {
  font-size: 22px;
}

.rest-style-header-text, .rest-style-footer-text {
  background-color: var(--main-color);
  margin-top: 10px;
  width: 250px;
  text-align: center;
  cursor: pointer;
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #fff;
  align-self: center;
  justify-self: center;
  margin-bottom: 20px;
}

.weekly-plan-layout-wrapper .form-of-layout-wrapper {
  padding: 0 10px !important;
}

.weekly-plan-layout-wrapper .form-of-layout-wrapper form {
  min-width: 300px;
}

.mark-scheme-analysis-container table {
  width: 100%;
  border-collapse: collapse;
}
.mark-scheme-analysis-container table thead th {
  text-align: center;
}
.mark-scheme-analysis-container table th, .mark-scheme-analysis-container table td {
  border: 1px solid #eee !important;
  padding: 12px 15px;
  text-align: right;
  color: #444;
  background: #fff;
}
.mark-scheme-analysis-container table th {
  text-align: center;
  background-color: #f6f8f9;
  font-weight: bold;
  color: #444;
}
.mark-scheme-analysis-container .flex {
  display: flex;
}
.mark-scheme-analysis-container .flex.items-center {
  align-items: center;
}
.mark-scheme-analysis-container .flex .flex-1 {
  flex: 1;
}
.mark-scheme-analysis-container .justify-center {
  justify-content: center;
}
.mark-scheme-analysis-container .justify-space-between {
  justify-content: space-between;
}
.mark-scheme-analysis-container .border-radius-25 {
  border-radius: 25px;
}
.mark-scheme-analysis-container .dashboard-box-title .icons-of-title-box {
  color: var(--main-color);
  margin-left: 10px;
  font-size: 1.7em;
}
.mark-scheme-analysis-container .dashboard-box-title h4 {
  font-size: 1.5em !important;
  margin: 0;
  text-transform: uppercase;
}
.mark-scheme-analysis-container .pdf .hidden_pdf {
  display: none;
}
.mark-scheme-analysis-container .pdf .pdf_show {
  display: block !important;
}
.mark-scheme-analysis-container .pdf .page-break {
  page-break-after: always;
  margin-top: 15px;
}
.mark-scheme-analysis-container fieldset {
  margin-bottom: unset !important;
}
.mark-scheme-analysis-container canvas {
  height: 300px !important;
}
.mark-scheme-analysis-container .table-container {
  overflow-x: auto;
  width: 100%;
}
.mark-scheme-analysis-container .view-container {
  margin-bottom: 30px;
}
.mark-scheme-analysis-container .level-data {
  transition: all 0.3s ease;
}
.mark-scheme-analysis-container .modern-toggle-label {
  font-weight: bold;
  color: #444;
  margin-left: 8px;
  font-size: 1.08em;
  min-width: 70px;
}
.mark-scheme-analysis-container .modern-toggle-switch {
  display: inline-flex;
  border: 1.5px solid #bde6f7;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
}
.mark-scheme-analysis-container .toggle-btn {
  border: none;
  background: #fff;
  padding: 8px 32px;
  font-weight: 700;
  font-size: 1em;
  color: var(--main-color);
  transition: background 0.2s, color 0.2s;
  outline: none;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
}
.mark-scheme-analysis-container .toggle-btn.active {
  background: rgba(var(--main-color-rgb), 40%);
  color: #444;
}
.mark-scheme-analysis-container .toggle-btn:not(.active):hover {
  background: rgba(var(--main-color-rgb), 10%);
}
.mark-scheme-analysis-container .names_table {
  margin-top: 15px;
  border-spacing: unset !important;
  border-collapse: unset !important;
}
.mark-scheme-analysis-container .table {
  background-color: #fff;
  width: 100%;
  border-collapse: collapse;
}
.mark-scheme-analysis-container .table:not(.table-names) {
  border-collapse: separate;
  border-spacing: 0 15px;
}
.mark-scheme-analysis-container .table tbody tr {
  background-color: #fafafa;
}
.mark-scheme-analysis-container .table tbody tr td {
  border-top: 1px solid #d5d5d5;
  border-bottom: 1px solid #d5d5d5;
  padding: 15px 10px;
  color: #444;
}
.mark-scheme-analysis-container .table tbody tr td:first-child {
  font-weight: bold;
}
.mark-scheme-analysis-container .table tbody tr th {
  padding: 8px 10px;
  color: #444;
}
.mark-scheme-analysis-container .table-bordered {
  border: unset;
}
.mark-scheme-analysis-container .numbers_table td:first-child, .mark-scheme-analysis-container .numbers_table th:first-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.mark-scheme-analysis-container .numbers_table td:last-child, .mark-scheme-analysis-container .numbers_table th:last-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.mark-scheme-analysis-container .chosen-container-multi .chosen-choices {
  padding: 0px 5px;
}
.mark-scheme-analysis-container .chosen-container-multi .chosen-choices li.search-choice {
  margin: 7px 5px;
}
.mark-scheme-analysis-container .chosen-container-multi .chosen-choices li.search-field input[type=text] {
  height: 20px;
  min-height: 40px;
}
.mark-scheme-analysis-container .controls-container {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 4px;
}
.mark-scheme-analysis-container .view-toggle .btn {
  min-width: 120px;
}
.mark-scheme-analysis-container .btn-group .btn {
  margin-left: 5px;
}
.mark-scheme-analysis-container .btn-group .btn:last-child {
  margin-left: 0;
}
.mark-scheme-analysis-container .margin-right-5 {
  margin-left: 5px;
}
.mark-scheme-analysis-container .flash {
  width: fit-content;
}
.mark-scheme-analysis-container .pagination-modern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mark-scheme-analysis-container .pagination-modern .page-arrow {
  scale: -1;
  border: none;
  background: none;
  color: #aeaeae;
  font-size: 22px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
  cursor: pointer;
  padding: 0;
}
.mark-scheme-analysis-container .pagination-modern .page-arrow.active, .mark-scheme-analysis-container .pagination-modern .page-arrow:not(:disabled):hover {
  color: var(--main-color);
  background: none;
}
.mark-scheme-analysis-container .pagination-modern .page-arrow:disabled {
  color: #ddd;
  cursor: default;
}
.mark-scheme-analysis-container .pagination-modern .page-btn {
  border: none;
  background: none;
  color: #aeaeae;
  font-size: 15px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  transition: color 0.2s, background 0.2s, border 0.2s;
  cursor: pointer;
  padding: 0;
  font-weight: 500;
  background: #eee;
}
.mark-scheme-analysis-container .pagination-modern .page-btn.active {
  color: var(--main-color);
  border: 2px solid var(--main-color);
  background: #fafafa;
  font-weight: bold;
}
.mark-scheme-analysis-container .pagination-modern .page-btn:disabled {
  color: #ddd;
  background: #ddd;
  cursor: default;
}
.mark-scheme-analysis-container .export-print-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 10px 0;
}
.mark-scheme-analysis-container .export-print-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  color: #444;
  font-weight: 500;
  font-size: 1.13em;
  cursor: pointer;
  transition: color 0.18s, text-decoration 0.18s;
  outline: none;
  box-shadow: none;
  padding: 0;
}
.mark-scheme-analysis-container .export-print-btn .icon-download,
.mark-scheme-analysis-container .export-print-btn .icon-printer {
  color: var(--main-color);
  font-size: 1.3em;
  margin-left: 2px;
  transition: color 0.18s;
}
.mark-scheme-analysis-container .export-print-btn:hover, .mark-scheme-analysis-container .export-print-btn:focus {
  color: #19b0e7;
}
.mark-scheme-analysis-container .export-print-btn:hover .icon-download,
.mark-scheme-analysis-container .export-print-btn:hover .icon-printer, .mark-scheme-analysis-container .export-print-btn:focus .icon-download,
.mark-scheme-analysis-container .export-print-btn:focus .icon-printer {
  color: #19b0e7;
}
.mark-scheme-analysis-container [id^=view-by-names] .table tr:first-child th:first-child {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
.mark-scheme-analysis-container [id^=view-by-names] .table tr:first-child th:last-child {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}
.mark-scheme-analysis-container [id^=view-by-names] .table tr.first-row-in-course td:first-child {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
.mark-scheme-analysis-container [id^=view-by-names] .table tr.first-row-in-course td:last-child {
  border-top-left-radius: 10px !important;
}
.mark-scheme-analysis-container [id^=view-by-names] .table tr.last-row-in-course td:last-child {
  border-bottom-left-radius: 10px !important;
}
@media print {
  .mark-scheme-analysis-container .hidden-print,
.mark-scheme-analysis-container form,
.mark-scheme-analysis-container .form-style-101,
.mark-scheme-analysis-container .export-print-bar,
.mark-scheme-analysis-container .export-print-btn,
.mark-scheme-analysis-container .modern-toggle-switch,
.mark-scheme-analysis-container .modern-toggle-label,
.mark-scheme-analysis-container .pagination-modern,
.mark-scheme-analysis-container .btn,
.mark-scheme-analysis-container .chosen-container,
.mark-scheme-analysis-container .alert,
.mark-scheme-analysis-container .warning_msg,
.mark-scheme-analysis-container .hidden_pdf {
    display: none !important;
  }
  .mark-scheme-analysis-container .table-container,
.mark-scheme-analysis-container .charts_container {
    display: block !important;
  }
  .mark-scheme-analysis-container table {
    border-collapse: collapse !important;
    width: 100% !important;
  }
  .mark-scheme-analysis-container table th, .mark-scheme-analysis-container table td {
    border: 1px solid #000 !important;
    padding: 8px !important;
  }
  .mark-scheme-analysis-container canvas {
    width: 100% !important;
    height: 300px !important;
  }
  .mark-scheme-analysis-container .chart-title {
    print-color-adjust: exact;
  }
  .mark-scheme-analysis-container .course-separator-row {
    display: none !important;
  }
  .mark-scheme-analysis-container .col-md-12 {
    break-after: avoid;
    break-before: avoid;
  }
  .mark-scheme-analysis-container tr, .mark-scheme-analysis-container td, .mark-scheme-analysis-container th {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    break-after: avoid !important;
    break-before: avoid !important;
  }
  .mark-scheme-analysis-container [id^=view-by-names] .table tr:first-child th:first-child {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
  .mark-scheme-analysis-container [id^=view-by-names] .table tr:first-child th:last-child {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }
  .mark-scheme-analysis-container [id^=view-by-names] .table tr.first-row-in-course td:first-child {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
  .mark-scheme-analysis-container [id^=view-by-names] .table tr.first-row-in-course td:last-child {
    border-top-left-radius: 0px !important;
  }
  .mark-scheme-analysis-container [id^=view-by-names] .table tr.last-row-in-course td:last-child {
    border-bottom-left-radius: 0px !important;
  }
}

.page-content .page-body .tall_box .inner .image {
  /* for teacher */
  position: relative;
  display: block;
  margin: 0 auto !important;
  width: 100%;
}
.page-content .page-body .tall_box .inner .cover .web_font_container {
  height: 47%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 170px;
}
.page-content .page-body .tall_box .inner .cover .web_font_container .icon {
  top: auto !important;
  margin: 0 auto;
  display: block;
  right: unset !important;
  width: 80px;
  height: 80px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em !important;
  box-shadow: none;
}
.page-content .page-body .tall_box .inner .cover .web_font_container .icon:before {
  color: var(--main-color);
}
.page-content .page-body .tall_box .inner .details br {
  display: none;
}
.page-content .page-body .tall_box .inner .details .msg {
  padding: 0 !important;
}
.page-content .page-body .tall_box .inner .details .msg span {
  background: rgba(var(--main-color-rgb), 0.1) !important;
  color: var(--dark-blue-color);
}
.page-content .page-body .tall_box .inner .slided .web_font_container {
  background: transparent;
}

.teacher-courses-index .main-blocks .cover .title_cover {
  margin-bottom: 20px;
  position: relative;
}
.teacher-courses-index .main-blocks .cover .title_cover:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 55px;
  height: 2px;
  background: linear-gradient(90deg, #5B86E5 0%, #555195 100%);
}

.main-blocks {
  /* end boxgrid*/
}
.main-blocks .boxgrid .details > .progress-bar, .main-blocks .boxgrid .cover > .progress-bar {
  bottom: 40px;
}
.main-blocks .boxgrid .details > .progress-bar .progress-bar span, .main-blocks .boxgrid .cover > .progress-bar .progress-bar span {
  top: 15px;
}
.main-blocks .boxgrid .title_cover {
  bottom: 0 !important;
  min-height: 60px;
  display: block;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 20px;
  top: 0;
}
.main-blocks .boxgrid .cover {
  padding: 0;
  height: 100%;
}
.main-blocks .boxgrid .cover .date-calendar {
  position: relative;
  left: auto;
  right: auto;
  top: 0 !important;
  transform: translate(0);
  font-size: 0.81em;
}
.main-blocks .boxgrid .cover .teacher-info {
  color: var(--dark-blue-color);
  padding-top: 10px;
}

/* end main-block*/
#sons_list_wrapper .tall_box .inner .web_font_container, .font_container_teacher_calnder {
  height: 170px !important;
}

.slided ul.paging {
  padding-right: 0;
}

.teacher-courses-index .course-block .boxgrid .inner .slided div.paged_block .paged_item:nth-child(-n+4):hover a, .teacher-courses-index .course-block .boxgrid .inner .slided div.paged_block .paged_item:nth-child(-n+4):hover:before {
  color: var(--main-color) !important;
}

.teacher-courses-index .course-block .boxgrid .inner .slided div.paged_block .paged_item:nth-child(-n+4) a {
  padding-left: 70% !important;
}
.teacher-courses-index .course-block .boxgrid .inner .slided div.paged_block .paged_item:nth-child(-n+4):before {
  font-size: 2.3em !important;
}

@media screen and (max-width: 1580px) {
  .teacher-courses-index .course-block .boxgrid .inner .slided div.paged_block .paged_item:nth-child(-n+4):before {
    font-size: 1.8em !important;
  }
}
@media screen and (max-width: 1500px) and (min-width: 881px) {
  .teacher-courses-index .course-block .tall_box .inner .slided .paged_item .image_link {
    padding: 0;
  }
  .teacher-courses-index .course-block .tall_box .inner .slided .paged_item .link a {
    max-width: calc(100% - 70px);
    font-size: 0.8em;
  }
}
@media screen and (max-width: 1050px) and (min-width: 881px) {
  .teacher-courses-index .course-block .boxgrid .inner .slided div.paged_block .paged_item:nth-child(-n+4) a {
    padding-left: 100% !important;
  }
  .teacher-courses-index .course-block .boxgrid .inner .slided div.paged_block .paged_item:nth-child(-n+4):before {
    display: none;
  }
}
@media screen and (max-width: 1494px) {
  .boxgrid .slided .prev-page, .boxgrid .slided .next-page {
    font-size: 1em;
  }

  .boxgrid .slided .next-page {
    right: auto;
    left: 4px;
  }

  .boxgrid .slided .prev-page {
    right: 4px;
    left: auto;
  }
}
@media screen and (max-width: 1328px) and (min-width: 768px) {
  .boxgrid .slided ul.paging li {
    width: 15px;
    height: 15px;
  }
  .boxgrid .slided ul.paging li a {
    width: 10px;
    height: 10px;
  }
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background: #f3f4fa;
}

.page-content .page-body .tall_box .inner .slided {
  background: var(--main-color) !important;
}

/* Navbar and sidebar  style */
.navbar .navbar-inner .navbar-header .navbar-account .account-area > li > a .badge {
  color: var(--main-color);
}
.navbar .navbar #scoreBar {
  display: flex !important;
}

/* End Navbar  and sidebar  style */
/*Tabs Style */
.nav-tabs.nav-justified > li > a {
  border-radius: 0 !important;
  margin: 0;
}

.nav-tabs.nav-justified > li > a:before, .nav-tabs.nav-justified > li > a:after {
  display: none;
}

.nav-tabs.nav-justified > li > a {
  background-color: #f3f4fa;
  padding: 20px;
}

.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus {
  color: #ffffff;
  background-color: var(--main-color);
}

.nav-tabs.nav-justified > li.active {
  top: 0;
}

/* end Tabs Style */
/*form style*/
.page-body form .form-group input,
.form-control,
select,
.page-body .grid__autosearch .select-styled,
input#mainLinksSideBar,
.roles-group > .btn:first-child,
.semesters-group > .btn:first-child .lti-course-group > .btn:first-child,
.page-body .select-styled,
.chosen-container-multi .chosen-choices,
.chosen-container-multi .chosen-choices li.search-choice {
  border-radius: 3px !important;
}

/*end form style */
#announcements .widget {
  box-shadow: unset;
}

.loading-container-custom {
  background: linear-gradient(90deg, #5B86E5 0%, #555195 100%);
}

.teacher_statistics_box {
  box-shadow: none;
}
.teacher_statistics_box form#statisticsSchoolsForm {
  width: 100%;
  background: none;
}

#msform #attachment_exam, #msform #next_to_import, #msform #offline_exam, #msform #generate_exam {
  display: none;
}
@media screen and (min-width: 992px) {
  #msform #qByqBtn, #msform #classic_button {
    width: 50%;
  }
}

.boxgrid .cover .date-calendar {
  font-size: 3em;
}

.navbar .navbar-brand {
  width: 165px;
  min-width: 165px !important;
}

body:before {
  background: linear-gradient(180deg, var(--main-color) 0%, rgba(var(--main-color-rgb), 70%) 60%, rgba(var(--main-color-rgb), 30%) 75%, #fafafa 100%);
}

#score a {
  color: #fff !important;
}

.page-content .page-body .tall_box .inner .web_font_container .icon:after {
  display: none !important;
}

.boxgrid .slided .paged_items {
  margin-top: -25px;
}

.dashboard-blocks-wrapper .tall_box .inner .slided .cell_title_bar {
  background: transparent !important;
}

#msform fieldset#start_fs > div .examType {
  background: #fff;
}

.navbar .navbar-inner .navbar-header .dateTime .nav-date-wrapper {
  font-weight: 300;
}

.dashboard-blocks-wrapper .main-blocks .boxgrid .cover .progress-bar .progress-bar {
  background: transparent linear-gradient(270deg, var(--main-color) 0%, #8F6AD680 100%) !important;
}

/* .browseContent_course_title{
    background: $sidemenu_bg;
    border-radius: 5px;
    padding: 10px;
 }*/
.evidence_accreditation a, .microphoneFab, .navbar .linkButton a, .navbar .helpBut a {
  color: var(--main-color);
}

.page-breadcrumbs .child-basic-info a, .page-breadcrumbs .child-basic-info a:hover, .page-breadcrumbs .child-basic-info a:focus {
  color: #fff;
}

/* .navbar .score-nav-section #scoreBar{
  display: flex;
 }*/
.admin-dashboard-box.box_transparent_blue_bg .dashboard-box-title .icons-of-title-box {
  color: #fff;
}

.admin-dashboard-box .admin-content-stats li:not(:last-child):before {
  background: #fff;
}

.admin-dashboard-box .dashbaord-box-tabs {
  border-color: #fff;
}

.boxgrid .slided .prev-page:before {
  content: "→";
}

.boxgrid .slided .next-page:not(.more-link):after {
  content: "←";
}

.boxgrid .teacher-info img {
  right: 130px !important;
  left: auto !important;
}

@keyframes moveArrowFromLeftSlowly {
  0% {
    left: 100%;
  }
  100% {
    left: 50%;
  }
}
@keyframes moveArrowFromRightSlowly {
  0% {
    left: 0%;
  }
  100% {
    left: 50%;
  }
}
.parent-menu:after {
  transform: rotateY(180deg);
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.right {
  right: -22px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.left {
  left: -39px;
}

div.hopscotch-bubble .hopscotch-bubble-content {
  margin: 0 40px 0 0;
  direction: rtl;
}

div.hopscotch-bubble .hopscotch-bubble-number {
  padding: 0;
}

input[type=checkbox][checked=true].checkbox-slider ~ .text.drak_theme_label:before {
  width: 57px;
  font-size: 8px;
}

input[type=checkbox][checked=true].checkbox-slider ~ .text.login_as_label:before {
  width: 57px;
  font-size: 8px;
}

input[type=checkbox].checkbox-slider ~ .text:before {
  content: "OFF           ON";
}

input[type=checkbox].checkbox-slider ~ .text {
  margin: 0;
}

.add-content, .edit-preparation {
  border-radius: 510px 0 0 50px !important;
}

.tile-block .back-cover i {
  transform: translateX(-50%) translateY(-50%) !important;
}

.chosen-container.chosen-with-drop .chosen-drop {
  transform: translateX(50%);
}

@media only screen and (min-width: 992px) {
  .main-article-content .mainComment .comment-body:before {
    transform: rotateY(0deg);
  }
  .main-article-content .subComment .post-wrapper:before {
    transform: rotateY(0deg);
  }
}
@media only screen and (max-width: 731px) {
  .datetimepicker.datetimepicker-rtl {
    left: 15% !important;
  }
}
.libraries_floated .dontOpenWidget:before {
  transform: rotate(180deg);
  display: inline-block;
}

a.downloadButton {
  background: url(../../img/button_170_download_rtl.png) no-repeat top center;
}
a.downloadButton:hover {
  background: url(../../img/button_170_download_rtl_hover.png) no-repeat top center;
}

.navbar-header .teacher_day_logo {
  margin-right: 28px;
}
@media screen and (max-width: 530px) {
  .navbar-header .teacher_day_logo {
    margin-right: 0;
  }
}

.fees_table_wrapper .prev, .fees_table_wrapper .next {
  transform: rotate(180deg);
}

.main-section-title-of-stu-dashboard .icon-arrow-right, .courses_list_for_student_dashboard .courses_item > i {
  transform: rotate(180deg) !important;
}

.courses_list_for_student_dashboard .courses_item_ratio_bar_value {
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.05) 0%, var(--main-color) 100%);
}

.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-next .item_gradiant {
  background: linear-gradient(90deg, #fafafa 0%, transparent 100%);
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-next .item_gradiant > i {
  transform: rotate(180deg) !important;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-next .item_gradiant > i:hover {
  transform: scale(-1.2) !important;
}

.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-prev .item_gradiant {
  background: linear-gradient(90deg, transparent 0%, #fafafa 100%);
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-prev .item_gradiant > i {
  transform: rotate(0deg) !important;
}
.discussion_rooms_list_for_student_dashboard .owl-carousel .owl-nav button.owl-prev .item_gradiant > i:hover {
  transform: rotate(0deg) scale(1.2) !important;
}

.discussion_rooms_list_for_student_dashboard .last_item_box i {
  transform: scaleX(-1) !important;
}

.virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-prev {
  transform: translate(50%, -50%);
}
.virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-prev > i {
  transform: scaleX(1);
}
@media (max-width: 600px) {
  .virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-prev {
    transform: translate(35%, -50%);
  }
}

.virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-next {
  transform: translate(-50%, -50%);
}
.virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-next > i {
  transform: scaleX(-1);
}
@media (max-width: 600px) {
  .virtual_classrooms #carousel-virtual_classrooms .owl-nav button.owl-next {
    transform: translate(-35%, -50%);
  }
}

.recommended_to_watch #carousel-recommended_to_watch .owl-nav button.owl-prev {
  transform: translateX(50%);
}
.recommended_to_watch #carousel-recommended_to_watch .owl-nav button.owl-prev > i {
  transform: scaleX(1);
}

.recommended_to_watch #carousel-recommended_to_watch .owl-nav button.owl-next {
  transform: translateX(-50%);
}
.recommended_to_watch #carousel-recommended_to_watch .owl-nav button.owl-next > i {
  transform: scaleX(-1);
}

.navbar .admin_back_login i {
  transform: rotate(180deg);
}

.rotate_180_rtl {
  transform: rotate(180deg);
}

.feedback-poll-container .poll-button-container {
  transform: rotate(90deg);
}
.feedback-poll-container .poll-button-container i {
  transform: rotate(-90deg);
}

.rotate-horizontal {
  transform: rotateY(180deg);
}

/*# sourceMappingURL=light-style-rtl.css.map */