@charset "UTF-8";
 

body {
   font: 16px/18px  Arial, Verdana, Helvetica, Sans-Serif;
   color: #554d40;
   background:#f8f9f9 url(../images/adminbg.png);
   background-repeat: repeat-xy;
   overflow-x: hidden;
}

.wrapper {
   width: 800px;
   margin: 0px auto;
}

* { padding: 0; margin: 0; }

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

li {
   list-style: none;
}

a {
   text-decoration: none;
   color: inherit;
}

.admin-footer {
   width: min(800px, calc(100% - 24px));
   margin: 20px auto;
   padding: 14px;
   color: #696868;
   text-align: center;
}

.admin-message {
   margin: 14px 0;
   padding: 12px;
   color: #24543c;
   background: #d9f8e7;
   border: 1px solid #a9dfbd;
   border-radius: 6px;
}

.admin-message-error {
   color: #743131;
   background: #fde5e5;
   border-color: #efb2b2;
}

.gallery-admin {
   margin-top: 14px;
}

.gallery-admin-item {
   margin: 0 0 22px;
   padding: 16px;
   background: rgba(255,255,255,0.78);
   border: 1px solid #dddddd;
   border-radius: 8px;
   box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

.gallery-admin-item h2 {
   margin: 0 0 12px;
   color: #555454;
   font: bold 18px Arial, Verdana, sans-serif;
}

.gallery-admin textarea {
   width: 100%;
   min-height: 90px;
   padding: 8px 10px;
   color: #333333;
   border: 1px solid #cfcfcf;
   border-radius: 5px;
   background: #eeeeee;
   font: 14px/1.45 Arial, Verdana, sans-serif;
}

.gallery-admin input[type=file] {
   width: 100%;
   min-height: 36px;
   padding: 8px 0;
}

.gallery-admin-preview {
   margin: 12px 0 12px 25px;
}

.gallery-admin-preview img {
   display: block;
   width: min(320px, 100%);
   height: auto;
   border: 1px solid #dddddd;
   border-radius: 6px;
}

.gallery-admin-delete {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   margin: 8px 0 0 25px;
   color: #743131;
   font: bold 12px Arial, Verdana, sans-serif;
}

.admin-stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
   gap: 10px;
   margin: 16px 0;
}

.admin-stats-grid-compact {
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.admin-stats-card {
   display: grid;
   gap: 4px;
   min-height: 82px;
   align-content: center;
   padding: 12px;
   background: #ffffff;
   border: 1px solid #dddddd;
   border-radius: 8px;
   box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

.admin-stats-card span {
   color: #777777;
   font: bold 11px Arial, Verdana, sans-serif;
   text-transform: uppercase;
}

.admin-stats-card strong {
   color: #30343b;
   font: bold 24px/1 Arial, Verdana, sans-serif;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}

.admin-stats-card-main {
   border-color: #ff9f50;
   box-shadow: 0 2px 12px rgba(255,112,0,0.18);
}

.admin-stats-formula {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
   margin: 0 0 16px;
   padding: 12px;
   color: #30343b;
   background: #ffffff;
   border: 1px solid #dddddd;
   border-left: 5px solid #ff7000;
   border-radius: 8px;
   box-shadow: 0 1px 8px rgba(0,0,0,0.06);
   font: 13px/1.35 Arial, Verdana, sans-serif;
}

.admin-stats-formula-hits {
   border-left-color: #d8175f;
}

.admin-stats-formula strong,
.admin-stats-formula span {
   white-space: nowrap;
}

.admin-stats-section {
   margin: 22px 0 0;
}

.admin-stats-section h2 {
   margin: 0 0 10px;
   color: #555454;
   font: bold 20px Arial, Verdana, sans-serif;
}

.admin-stats-table-wrap {
   overflow-x: auto;
   margin: 16px 0;
   background: #ffffff;
   border: 1px solid #dddddd;
   border-radius: 8px;
   box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

.admin-stats-table {
   width: 100%;
   min-width: 1060px;
   border-collapse: collapse;
}

.admin-stats-table th,
.admin-stats-table td {
   padding: 10px 12px;
   color: #30343b;
   border-bottom: 1px solid #eeeeee;
   font: 13px/1.35 Arial, Verdana, sans-serif;
   text-align: left;
   vertical-align: top;
}

.admin-stats-table th {
   color: #777777;
   background: #f6f7f9;
   font-weight: 800;
   text-transform: uppercase;
}

.admin-stats-table td span {
   display: block;
   color: #777777;
   font-size: 12px;
}

.admin-stats-table td strong {
   white-space: nowrap;
}

.admin-stats-info-table {
   min-width: 0;
}

.admin-stats-info-table th {
   width: 220px;
}

@media (max-width: 760px) {
   .admin-stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

.penguin-admin-form {
   display: grid;
   gap: 12px;
}

.penguin-admin-form textarea {
   width: 100%;
   min-height: 420px;
   padding: 12px;
   color: #1f2937;
   font: 14px/1.45 Consolas, monospace;
   border: 1px solid #c7c7c7;
   border-radius: 6px;
}

.admin-upload-panel,
.admin-playlist-list {
   margin: 16px 0;
   padding: 16px;
   background: rgba(255, 255, 255, 0.78);
   border: 1px solid #dddddd;
   border-radius: 8px;
   box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

.admin-upload-panel h2,
.admin-playlist-list h2 {
   margin: 0 0 12px;
   color: #555454;
   font: bold 18px Arial, Verdana, sans-serif;
}

.penguin-upload-form {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
   gap: 12px;
   align-items: end;
}

.penguin-upload-form label {
   display: grid;
   gap: 6px;
   color: #777777;
   font: bold 12px Arial, Verdana, sans-serif;
   text-transform: uppercase;
}

.penguin-upload-form input[type=text],
.penguin-upload-form input[type=file] {
   width: 100%;
   min-height: 38px;
   padding: 8px 10px;
   border: 1px solid #cfcfcf;
   border-radius: 5px;
   background: #eeeeee;
}

.penguin-upload-form #pubbutton,
.admin-playlist-item input[type=submit] {
   float: none;
   clear: none;
   margin: 0;
   width: auto;
   min-width: 100px;
   padding: 0 14px;
}

.admin-field-help {
   margin-top: 10px;
   color: #747474;
   font: 12px/1.4 Arial, Verdana, sans-serif;
}

.admin-playlist-item {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 12px;
   align-items: center;
   padding: 10px 0;
   border-top: 1px solid #eeeeee;
}

.admin-playlist-item strong,
.admin-playlist-item span {
   display: block;
}

.admin-playlist-item strong {
   color: #555454;
   font: bold 14px Arial, Verdana, sans-serif;
}

.admin-playlist-item span {
   color: #777777;
   font: 12px/1.4 Consolas, monospace;
   overflow-wrap: anywhere;
}

.admin-media-preview {
   margin: 10px 0 0 25px;
}

.admin-media-preview img {
   display: block;
   width: min(280px, 100%);
   height: auto;
   border-radius: 6px;
   border: 1px solid #dddddd;
}

.admin-editor-form .note-editor {
   margin-left: 25px;
   width: 740px;
   max-width: calc(100% - 25px);
}

.admin-editor-form .admin-field {
   display: grid;
   gap: 8px;
   width: 100%;
}

.admin-editor-form .admin-field > label,
.admin-editor-form .admin-field > span {
   color: #9a9a9a;
   font: bold 12px Arial, Verdana, sans-serif;
   text-transform: uppercase;
}

.admin-editor-form .admin-field input[type=text],
.admin-editor-form .admin-field textarea,
.admin-editor-form .admin-field input[type=file] {
   margin-left: 0 !important;
}

.note-editor {
   text-transform: none;
}

.note-editor .panel-heading.note-toolbar {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   padding: 8px;
   background: #f7f7f7;
   border-bottom: 1px solid #d7d7d7;
}

.note-editor .btn-group {
   position: relative;
   display: inline-flex;
   vertical-align: middle;
   margin: 0 !important;
}

.note-editor .btn,
.note-editor button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 30px;
   min-height: 30px;
   padding: 5px 8px;
   color: #3f3f3f;
   background: #ffffff;
   border: 1px solid #cfcfcf;
   border-radius: 4px;
   box-shadow: none;
   cursor: pointer;
}

.note-editor .dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 1060;
   display: none;
   min-width: 160px;
   max-height: 280px;
   padding: 6px;
   margin: 2px 0 0;
   overflow: auto;
   list-style: none;
   background: #ffffff;
   border: 1px solid #cfcfcf;
   border-radius: 5px;
   box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.note-editor .open > .dropdown-menu,
.note-editor .dropdown-menu.show {
   display: block;
}

.note-editor .dropdown-menu li,
.note-editor .dropdown-menu a {
   display: block;
   float: none;
   width: auto;
   height: auto;
   margin: 0;
   color: #444444;
   text-align: left;
}

.note-editor .note-color .dropdown-menu {
   min-width: 330px;
}

.note-editor .note-editing-area {
   clear: both;
}

.note-editor .note-editable {
   min-height: 320px;
   color: #1f1f1f;
   background: #ffffff;
   text-shadow: none;
}

.note-dialog > div,
.note-modal,
.modal {
   display: none;
}

.note-dialog .modal.in,
.note-dialog .note-modal.in,
.modal.in {
   display: block;
}

.note-dialog label {
   display: block;
   margin: 8px 0 4px;
}

.admin-sr-only {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
}

@media (max-width: 860px) {
   .header {
      height: auto !important;
      min-height: 77px;
      padding-bottom: 12px;
   }

   .wrapper,
   #inarea,
   #area {
      width: calc(100% - 24px) !important;
      max-width: 800px;
   }

   .header .wrapper,
   #nav {
      width: calc(100% - 24px) !important;
   }

   #nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding: 10px 0;
   }

   #nav li,
   #logout {
      float: none !important;
      display: inline-flex;
   }

   .logo {
      flex: 1 1 100%;
   }

   .title {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .content {
      min-height: 0;
      height: auto !important;
      padding: 12px;
   }

   .content h1 {
      overflow-wrap: anywhere;
   }

   #options {
      position: static !important;
      display: flex;
      gap: 8px;
      margin-top: 10px;
   }

   .form input[type=text],
   .form input[type=password],
   .inform input[type=text],
   .inform input[type=password] {
      width: min(100%, 600px) !important;
   }

   #newpost li,
   #settings li,
   .content {
      width: 100% !important;
   }

   #newpost input[type=text],
   #newpost textarea,
   #settings input[type=text],
   #settings input[type=password],
   #settings select {
      width: 100% !important;
      max-width: 100%;
      margin-left: 0 !important;
      float: none !important;
   }

   #title,
   #photo,
   #newpost textarea,
   .admin-editor-form .note-editor,
   .admin-media-preview {
      margin-left: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
   }

   .penguin-upload-form,
   .admin-playlist-item {
      grid-template-columns: 1fr;
   }
}

#spacer {
   height: 100px;
}

#spacer2 {
   height: 15px;
}


/***** Install Section *****/

#inarea {
   margin: 0px auto;
   height: 840px;
   width: 800px;
   border: 1px solid #aaaaaa;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -moz-box-shadow: 0 0 5px #bbbbbb;
   -webkit-box-shadow: 0 0 5px #bbbbbb;
   box-shadow: 0 0 5px #bbbbbb;
   text-align: center;
}

#inarea p {
   color: #ff7000;
   text-align: center;
   font: 30px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   padding-top: 50px;
   text-shadow: 1px 1px 1px #cccccc;
}

.inform input[type=text] {
   padding-left: 12px;
   margin-top: 15px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 600px;
   height: 44px;
   background: #eeeeee;
   border-style: none;
   color: #696868;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   box-shadow: inset 0 0 10px #757575;
   -webkit-border-shadow: inset 0 0 10px #757575;
   -moz-box-shadow: inset 0 0 10px #757575;
   text-shadow: 1px 1px 1px #cccccc;
   outline: none;
}

.inform input[type=password] {
   padding-left: 12px;
   margin-top: 15px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 600px;
   height: 44px;
   background: #eeeeee;
   border-style: none;
   color: #696868;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   box-shadow: inset 0 0 10px #757575;
   -webkit-border-shadow: inset 0 0 10px #757575;
   -moz-box-shadow: inset 0 0 10px #757575;
   text-shadow: 1px 1px 1px #cccccc;
   outline: none;
}

.inform input:focus {
   border: 3px solid #ffffff;
   box-shadow: inset 0 0 15px #757575;
   -webkit-border-shadow: inset 0 0 15px #757575;
   -moz-box-shadow: inset 0 0 15px #757575;
}

#install {
   margin-top: 25px;
   font: 15px Helvetica-neue, Sans-Serif;
   color: #403f3f;
   width: 75px;
   height: 41px;
   border: 1px solid #d5bcbc;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -moz-box-shadow: 0 0 5px #eeeeee;
   -webkit-box-shadow: 0 0 5px #eeeeee;
   box-shadow: 0 0 5px #eeeeee;
   background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e8e5e5));
}

#install:hover {
   -moz-box-shadow: 0 0 3px #aaaaaa;
   -webkit-box-shadow: 0 0 3px #aaaaaa;
   box-shadow: 0 0 3px #aaaaaa;
   background: -webkit-gradient(linear, left top, left bottom, from(#fcfbfd), to(#e8e5e5));
}

#install:active {
   box-shadow: inset 0 0 10px #aaaaaa;
   -webkit-border-shadow: inset 0 0 10px #aaaaaa;
   -moz-box-shadow: inset 0 0 10px #aaaaaa;
}


i#small input[type=text] {
   display: inline;
   padding-left: 12px;
   margin-top: 15px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 250px;
   height: 44px;
   background: #eeeeee;
   border-style: none;
   color: #696868;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   box-shadow: inset 0 0 10px #757575;
   -webkit-border-shadow: inset 0 0 10px #757575;
   -moz-box-shadow: inset 0 0 10px #757575;
   text-shadow: 1px 1px 1px #cccccc;
   outline: none;
}

/***** Login Section *****/

#area {
   margin: 0px auto;
   height: 345px;
   width: 460px;
   border: 1px solid #aaaaaa;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -moz-box-shadow: 0 0 5px #bbbbbb;
   -webkit-box-shadow: 0 0 5px #bbbbbb;
   box-shadow: 0 0 5px #bbbbbb;
}

#area p {
   color: #ff7000;
   text-align: center;
   font: 30px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   padding-top: 50px;
   text-shadow: 1px 1px 1px #cccccc;
}

#area span a {
   color: #ff7000;
   text-align: center;
   font: 15px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   margin-right: 290px;
}

#area span a:hover {
   text-shadow: 1px 1px 1px #cccccc;
}

#area span a:active {
   color: #e56300;
   text-shadow: inset 2px 2px 2px #cccccc;
}

.form input[type=text] {
   padding-left: 12px;
   margin-top: 15px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 273px;
   height: 44px;
   background: #eeeeee;
   border-style: none;
   color: #696868;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   box-shadow: inset 0 0 5px #757575;
   -webkit-border-shadow: inset 0 0 5px #757575;
   -moz-box-shadow: inset 0 0 5px #757575;
   text-shadow: 1px 1px 1px #cccccc;
   outline: none;
}

.form input[type=password] {
   padding-left: 12px;
   margin-top: 15px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 273px;
   height: 44px;
   background: #eeeeee;
   border-style: none;
   color: #696868;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   box-shadow: inset 0 0 5px #757575;
   -webkit-border-shadow: inset 0 0 5px #757575;
   -moz-box-shadow: inset 0 0 5px #757575;
   text-shadow: 1px 1px 1px #cccccc;
   outline: none;
}

.form input:focus {
   border: 3px solid #ffffff;
   box-shadow: inset 0 0 9px #757575;
   -webkit-border-shadow: inset 0 0 9px #757575;
   -moz-box-shadow: inset 0 0 9px #757575;
}

#login {
   font: 15px Helvetica-neue, Sans-Serif;
   color: #403f3f;
   width: 75px;
   height: 41px;
   border: 1px solid #d5bcbc;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -moz-box-shadow: 0 0 5px #eeeeee;
   -webkit-box-shadow: 0 0 5px #eeeeee;
   box-shadow: 0 0 5px #eeeeee;
   background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e8e5e5));
   margin-bottom: 40px;
}

#login:hover {
   -moz-box-shadow: 0 0 1px #aaaaaa;
   -webkit-box-shadow: 0 0 1px #aaaaaa;
   box-shadow: 0 0 1px #aaaaaa;
   background: -webkit-gradient(linear, left top, left bottom, from(#fcfbfd), to(#e8e5e5));
}

#login:active {
   box-shadow: inset 0 0 10px #aaaaaa;
   -webkit-border-shadow: inset 0 0 10px #aaaaaa;
   -moz-box-shadow: inset 0 0 10px #aaaaaa;
}



/***** Admin Section *****/

/* Header */

.header {
   background: -moz-linear-gradient(top, #666565, #3e3e3e);
   background: -webkit-gradient(linear, left top, left bottom, from(#666565), to(#3e3e3e));
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666565', endColorstr='#3e3e3e');
   background: -o-linear-gradient(rgb(102,101,101),rgb(62,62,62));
   background-color: #3e3e3e;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666565), to(#3e3e3e));
   background: -webkit-linear-gradient(top, #666565, #3e3e3e);
   background:    -moz-linear-gradient(top, #666565, #3e3e3e);
   background:     -ms-linear-gradient(top, #666565, #3e3e3e);
   background:      -o-linear-gradient(top, #666565, #3e3e3e);

   
   
   height: 77px;
   border-bottom: 20px solid #ff7000;
}

#nav {
   padding-top:20px;
}

.logo {
   font: 30px Helvetica-neue, Sans-Serif !important;
   font-weight: bold !important;
   color: #ffffff !important;
   text-shadow: 1px 1px 1px #000000 !important;
   display: inline;  
}

.logo:hover {
   -webkit-transition: opacity 0.5s linear;
   -o-transition: opacity 0.5s linear;
   -moz-transition: opacity 0.5s linear;
   opacity: 0.5;
   color: #ffffff;
}

#nav li a {
   color: #ffffff;
   font: 12px Helvetica-neue, Sans-Serif;
}

#nav li {
   margin-left: 20px;
   display: inline;
   float: right;
   width: 105px;
   height: 32px;
   text-align: center;
   color: #ffffff;
   font: 12px Helvetica-neue, Sans-Serif;
   font-weight: bold; 
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   margin-top: -30px;
}

#nav li:hover {
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   width: 105px;
   height: 32px; 
   box-shadow: inset 0 0 6px #000000;
   -webkit-border-shadow: inset 0 0 6px #000000;
   -moz-box-shadow: inset 0 0 6px #000000;
   background: -webkit-gradient(linear, left top, left bottom, from(#414141), to(#5d5d5d));
   background: -moz-linear-gradient(bottom, #414141, #5d5d5d);
}

#nav li:active {
   box-shadow: inset 0 0 10px #000000;
   -webkit-border-shadow: inset 0 0 10px #000000;
   -moz-box-shadow: inset 0 0 10px #000000;
}

#nav span {
   margin-left: 20px;
   display: inline;
   float: right;
   width: 105px;
   height: 32px;
   text-align: center;
   color: #ffffff;
   font: 12px Helvetica-neue, Sans-Serif;
   font-weight: bold; 
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   width: 105px;
   height: 32px; 
   box-shadow: inset 0 0 6px #000000;
   -webkit-border-shadow: inset 0 0 6px #000000;
   -moz-box-shadow: inset 0 0 6px #000000;
   background: -webkit-gradient(linear, left top, left bottom, from(#414141), to(#5d5d5d));
   background: -moz-linear-gradient(bottom, #414141, #5d5d5d);
}

#nav span:active {
   box-shadow: inset 0 0 10px #000000;
   -webkit-border-shadow: inset 0 0 10px #000000;
   -moz-box-shadow: inset 0 0 10px #000000;
}

#nav p {
   padding-top: 9px !important;
   text-align: center;
   font: 12px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   color: #ffffff;
   text-shadow: 1px 1px 1px #484641;
}

/*#nav li span {
   width: 105px;
   height: 32px; 
   box-shadow: inset 0 0 10px #aaaaaa;
   -webkit-border-shadow: inset 0 0 10px #aaaaaa;
   -moz-box-shadow: inset 0 0 10px #aaaaaa;
   background: -webkit-gradient(linear, left top, left bottom, from(#414141), to(#5d5d5d));
}*/

#logout li {
   margin-left: 20px;
   display: inline;
   float: right;
   width: 105px;
   height: 32px;
   text-align: center;
   color: #ffffff;
   font: 12px Helvetica-neue, Sans-Serif;
   font-weight: bold; 
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
}

#logout li:hover {
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   width: 105px;
   height: 32px; 
   box-shadow: inset 0 0 6px #000000;
   -webkit-border-shadow: inset 0 0 6px #000000;
   -moz-box-shadow: inset 0 0 6px #000000;
   background: -webkit-gradient(linear, left top, left bottom, from(#c4130d), to(#c64742));
   background: -moz-linear-gradient(bottom, #c4130d, #c64742);
}

#logout li:active {
   box-shadow: inset 0 0 10px #000000;
   -webkit-border-shadow: inset 0 0 10px #000000;
   -moz-box-shadow: inset 0 0 10px #000000;
}

/* Title */

.title {
   clear: both;
   padding-top: 25px;
}

#button {
   text-align: center;
   margin-top: -5px;
   display: inline;
   float: right;
   clear: both;
   width: 115px;
   height: 28px;
   border: 1px solid #f4c35a;
   border-radius: 15px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   -moz-box-shadow: 0 0 2px #484641;
   -webkit-box-shadow: 0 0 2px #484641;
   box-shadow: 0 0 2px #484641;
   background: -webkit-gradient(linear, left top, left bottom, from(#f8bc8d), to(#ff7000));
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8bc8d', endColorstr='#ff7000');
  background-image: -o-linear-gradient(rgb(248,188,141),rgb(255,112,0));
   background: -moz-linear-gradient(bottom, #ff7000, #f8bc8d);
   -webkit-transition: opacity 0.5s linear;
   -o-transition: opacity 0.5s linear;
   -moz-transition: opacity 0.5s linear;
   opacity: 0.6;
   text-align: center;
   font: 12px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   color: #ffffff;
   text-shadow: 1px 1px 1px #484641;
}

#button:hover {
   -moz-box-shadow: 0 0 6px #484641;
   -webkit-box-shadow: 0 0 6px #484641;
   box-shadow: 0 0 6px #484641;
   background: -webkit-gradient(linear, left top, left bottom, from(#f8bc8d), to(#ff7000));
   background: -moz-linear-gradient(bottom, #ff7000, #f8bc8d);
   -webkit-transition: opacity 0.5s linear;
   -o-transition: opacity 0.5s linear;
   -moz-transition: opacity 0.5s linear;
   opacity: 1;
}

#button:active {
   text-shadow: none;
   border: 1px solid #f4c35a;
   background: -webkit-gradient(linear, left top, left bottom, from(#f8bc8d), to(#ff7000));
    background: -moz-linear-gradient(bottom, #ff7000, #f8bc8d);
    box-shadow: inset 0 0 10px #d15c00;
   -webkit-border-shadow: inset 0 0 10px #d15c00;
   -moz-box-shadow: inset 0 0 10px #d15c00;
}

.title span {
   font: 23px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   color: #555454;
   display: inline;
   height:30px;
   clear: both;
}

#button p {
   padding-top:10px;
   padding-top: 7px;
   text-align: center;
   font: 12px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   color: #ffffff;
   text-shadow: 1px 1px 1px #484641;
}

#button p:active {
   text-shadow: none;
}

#line {
   margin-top: 20px;
   clear: both;
   height: 1px;
   background: #bbbbbb;
   margin-bottom: 15px;
}

/* Publish Post Button */

#pubbutton {
   text-align: center;
   margin-bottom: 30px;
   display: inline;
   float: right;
   clear: both;
   width: 115px;
   height: 30px;
   border: 1px solid #f4c35a;
   border-radius: 15px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   -moz-box-shadow: 0 0 2px #484641;
   -webkit-box-shadow: 0 0 2px #484641;
   box-shadow: 0 0 2px #484641;
   background: -webkit-gradient(linear, left top, left bottom, from(#f8bc8d), to(#ff7000));
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8bc8d', endColorstr='#ff7000');
  background-image: -o-linear-gradient(rgb(248,188,141),rgb(255,112,0));
   background: -moz-linear-gradient(bottom, #ff7000, #f8bc8d);
   -webkit-transition: opacity 0.5s linear;
   -o-transition: opacity 0.5s linear;
   -moz-transition: opacity 0.5s linear;
   opacity: 0.6;
   text-align: center;
   font: 12px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   color: #ffffff;
   text-shadow: 1px 1px 1px #484641;
}

#pubbutton:hover {
   -moz-box-shadow: 0 0 6px #484641;
   -webkit-box-shadow: 0 0 6px #484641;
   box-shadow: 0 0 6px #484641;
   background: -webkit-gradient(linear, left top, left bottom, from(#f8bc8d), to(#ff7000));
   background: -moz-linear-gradient(bottom, #ff7000, #f8bc8d);
   -webkit-transition: opacity 0.5s linear;
   -o-transition: opacity 0.5s linear;
   -moz-transition: opacity 0.5s linear;
   opacity: 1;
}

#pubbutton:active {
   text-shadow: none;
   border: 1px solid #f4c35a;
   background: -webkit-gradient(linear, left top, left bottom, from(#f8bc8d), to(#ff7000));
    background: -moz-linear-gradient(bottom, #ff7000, #f8bc8d);
    box-shadow: inset 0 0 10px #d15c00;
   -webkit-border-shadow: inset 0 0 10px #d15c00;
   -moz-box-shadow: inset 0 0 10px #d15c00;
}

.title span {
   font: 23px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   color: #555454;
   display: inline;
   height:30px;
   clear: both;
}

#pubbutton p {
   padding-top:10px;
   padding-top: 7px;
   text-align: center;
   font: 12px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   color: #ffffff;
   text-shadow: 1px 1px 1px #484641;
}

#pubbutton p:active {
   text-shadow: none;
}


/* Manage Posts */

.content {
   width: 800px;
   padding-bottom: 10px;
}

.content li {
   display: inline;
   text-align: left;
}

.content p {
   display: inline-table;
}

.content a {
   font: 18px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   clear: both;
   color: #b3b1b0;
   text-align: left;
   padding-top: 20px;
}

.content a:hover {
   color: #ff7000;
}

.content span {
   text-align: right !important;
}

#line2 {
   margin-top: 25px;
   margin-bottom: 15px;
   clear: both;
   height: 1px;
   background: #e9e9e9;
}

#options {
   margin-top: -22px;
}

#edit {
   background-image: url(../images/edit.png);
   height: 17px;
   width: 18px;
   display: block;
   padding-right: 10px;
   background-repeat: no-repeat;
   margin-top: 2px;
   float: right;
}

#edit:hover {
   background-image: url(../images/edithover.png);
   height: 17px;
   width: 18px;
   display: block;
}

#delete {
   font: 17.26pt Helvetica-neue, Sans-Serif;
   color: #b3b1b0; 
   font-weight: bold;
   float: right;
}

#delete:hover {
   color: #ff0d0d !important;
}

/* New & Edit Post */

#newpost li span {
   margin-top: -50px;
}

#newpost li {
   font: 12px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   clear: both;
   color: #b3b1b0;
   width: 800px;
   text-align: left;
   padding-top: 15px; 
   text-transform: uppercase; 
}

#newpost li:hover{
   color: #ff7000;
}

#newpost p {
   text-transform: none;
}

#newpost textarea {
   margin-left: 25px;
}

#newpost textarea {
   padding: 12px 12px 12px 12px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 740px;
   background: #eeeeee;
   border: none;
   color: #696868;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   box-shadow: inset 0 0 5px #757575;
   -webkit-border-shadow: inset 0 0 5px #757575;
   -moz-box-shadow: inset 0 0 5px #757575;
   text-shadow: 1px 1px 1px #cccccc;
   clear: both;
   resize: vertical;
   max-height: 740px !important;
}

#newpost textarea:focus {
   border: 3px solid #ffffff;
   outline: none;
}

#newpost input[type=text] {
   padding-right: 12px;
   padding-left: 12px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 740px;
   background: #eeeeee;
   border: none;
   color: #696868;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   box-shadow: inset 0 0 5px #757575;
   -webkit-border-shadow: inset 0 0 5px #757575;
   -moz-box-shadow: inset 0 0 5px #757575;
   text-shadow: 1px 1px 1px #cccccc;
   clear: both;
}

#newpost input[type=text]:focus {
   padding-right: 12px;
   padding-left: 12px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 740px;
   background: #eeeeee;
   border: 3px solid #ffffff;
   color: #696868;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   box-shadow: inset 0 0 9px #757575;
   -webkit-border-shadow: inset 0 0 9px #757575;
   -moz-box-shadow: inset 0 0 9px #757575;
   outline: none;
}

input#text {
   height:151px;
   text-overflow: hidden;
   overflow: auto;
   padding-top: 10px;
}

#newpost input[type=file] {
   font: 15px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   color: #b6b8b8;
}


#title {
   height:34px;
   margin-left: 25px;
}


#photo {
   height:34px;
   margin-left: 15px;
}

.photo {
}


/* Site Settings */

#settings li span {
   margin-bottom: -20px;
}

#settings li {
   font: 12px Helvetica-neue, Sans-Serif;
   font-weight: bold;
   clear: both;
   color: #b3b1b0;
   width: 800px;
   text-align: left;
   padding-top: 15px; 
   text-transform: uppercase; 
}

#settings li:hover{
   color: #ff7000;
}

#settings p {
   text-transform: none;
}

#settings input {
   margin-left: 10px;
}

#settings textarea {
   margin-left: 10px;
}

#settings input[type=text] {
   margin-top: -10px;
   float: right;
   height: 34px;
   padding-right: 12px;
   padding-left: 12px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 700px;
   background: #eeeeee;
   border: none;
   color: #696868;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   box-shadow: inset 0 0 5px #757575;
   -webkit-border-shadow: inset 0 0 5px #757575;
   -moz-box-shadow: inset 0 0 5px #757575;
   text-shadow: 1px 1px 1px #cccccc;
   clear: both;
}

#settings input[type=text]:focus {
   padding-right: 12px;
   margin-top: -10px;
   float: right;
   height: 34px;
   padding-left: 12px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 700px;
   background: #eeeeee;
   border: 3px solid #ffffff;
   color: #696868;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   box-shadow: inset 0 0 9px #757575;
   -webkit-border-shadow: inset 0 0 9px #757575;
   -moz-box-shadow: inset 0 0 9px #757575;
   outline: none;
}

#settings input[type=password] {
   margin-top: -10px;
   float: right;
   height: 34px;
   padding-right: 12px;
   padding-left: 12px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 700px;
   background: #eeeeee;
   border: none;
   color: #696868;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   box-shadow: inset 0 0 5px #757575;
   -webkit-border-shadow: inset 0 0 5px #757575;
   -moz-box-shadow: inset 0 0 5px #757575;
   text-shadow: 1px 1px 1px #cccccc;
   clear: both;
}

#settings input[type=password]:focus {
   padding-right: 12px;
   margin-top: -10px;
   float: right;
   height: 34px;
   padding-left: 12px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 700px;
   background: #eeeeee;
   border: 3px solid #ffffff;
   color: #696868;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   box-shadow: inset 0 0 9px #757575;
   -webkit-border-shadow: inset 0 0 9px #757575;
   -moz-box-shadow: inset 0 0 9px #757575;
   outline: none;
}

#settings select {
   margin-top: -10px;
   float: right;
   height: 34px;
   padding-right: 12px;
   padding-left: 12px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 700px;
   background: #eeeeee;
   border: none;
   color: #696868;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   box-shadow: inset 0 0 5px #757575;
   -webkit-border-shadow: inset 0 0 5px #757575;
   -moz-box-shadow: inset 0 0 5px #757575;
   text-shadow: 1px 1px 1px #cccccc;
   clear: both;
}

#settings select:focus {
   padding-right: 12px;
   margin-top: -10px;
   float: right;
   height: 34px;
   padding-left: 12px;
   font: 15px Helvetica-Light, Sans-Serif;
   width: 700px;
   background: #eeeeee;
   border: 3px solid #ffffff;
   color: #696868;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   box-shadow: inset 0 0 9px #757575;
   -webkit-border-shadow: inset 0 0 9px #757575;
   -moz-box-shadow: inset 0 0 9px #757575;
   outline: none;
}

/* Pages */

.pages {
   margin-top: 25px;
   font: 12px 'Shanti', sans-serif;
   color: #6f6f6f;
   text-transform: uppercase;
   height: 12px;
}

.pages li {
   display: inline-table;
   padding-right: 5px;
   height: 14px;
}

.pages a {
   color: #6f6f6f;
   display: inline-table;
   padding-right: 5px;
   height: 14px;
}

#pact {
   text-align: center;
   width: 12px;
   background-color: #6f6f6f;
   color: #ffffff;
}

@media (max-width: 860px) {
   .header {
      height: auto !important;
      min-height: 77px;
      padding-bottom: 12px;
   }

   .wrapper,
   #inarea,
   #area,
   .content,
   #newpost li,
   #settings li {
      width: calc(100% - 24px) !important;
      max-width: 800px;
   }

   #nav {
      width: calc(100% - 24px) !important;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding: 10px 0;
   }

   #nav li,
   #nav span,
   #logout,
   #logout li {
      float: none !important;
      display: inline-flex !important;
      margin: 0 !important;
   }

   .logo {
      flex: 1 1 100%;
      display: block;
      font-size: 24px !important;
   }

   #newpost input[type=text],
   #newpost textarea,
   #settings input[type=text],
   #settings input[type=password],
   #settings select {
      width: 100% !important;
      max-width: 100%;
      margin-left: 0 !important;
      float: none !important;
   }

   #title,
   #photo,
   .admin-editor-form .note-editor,
   .admin-media-preview {
      margin-left: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
   }

   .penguin-upload-form,
   .admin-playlist-item {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 520px) {
   body {
      font-size: 14px;
   }

   #spacer {
      height: 36px;
   }

   #area {
      height: auto;
      min-height: 320px;
      padding: 18px 12px;
   }

   #area p {
      font-size: 24px;
      padding-top: 18px;
   }

   #area span a {
      display: block;
      margin: 0;
      text-align: center;
   }
}





html,
body {
    min-height: 100%;
    background: #f4f6f8 !important;
    color: #222 !important;
    font-family: ixr, Arial, Helvetica, sans-serif !important;
    font-size: 14px;
    line-height: 1.45;
}

/* Main page layout */
.wrapper {
    width: 100%;
    min-width: 0 !important;
}

.center_box,
.center_box2,
.top_box,
.top_box2,
.bottom_box,
.linia,
.linia2 {
    width: 100% !important;
    max-width: 960px !important;
    box-sizing: border-box;
}

.center_box,
.center_box2 {
    background: rgba(255,255,255,0.72);
    padding: 18px 20px 26px;
    border-radius: 10px;
}

/* Page title */
.top_txt {
    font-family: ixb, Arial, Helvetica, sans-serif !important;
    font-size: 26px !important;
    color: #30343b !important;
    margin: 22px 0 14px 0 !important;
    letter-spacing: -0.3px;
}

/* Labels */
.title_web,
.log_pass,
.icpy,
.icpys,
.tab_info,
.tab_info_s,
.tab_info_c,
.top_box_txt_center {
    color: #30343b !important;
    font-family: ixr, Arial, Helvetica, sans-serif !important;
}

/* Inputs and textareas */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
select,
textarea,
.inf {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #222 !important;
    background: #ffffff !important;
    border: 1px solid #b7bec8 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.13) !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
textarea {
    width: 100% !important;
    max-width: 720px !important;
}

textarea {
    min-height: 170px !important;
    line-height: 1.55 !important;
    resize: vertical;
}

/* Make editor content readable */
.cleditorMain,
.cleditorMain iframe,
.cleditorMain textarea,
iframe {
    max-width: 100% !important;
}

.cleditorMain {
    border: 1px solid #b7bec8 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.cleditorMain iframe,
.cleditorMain textarea {
    background: #fff !important;
    color: #111 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* ==========================================================
   CLEDITOR / OLD WYSIWYG TOOLBAR ICON FIX
   This replaces missing image icons with readable symbols.
   ========================================================== */

.cleditorToolbar {
    height: auto !important;
    min-height: 38px !important;
    background: linear-gradient(#ffffff, #eef1f5) !important;
    border-bottom: 1px solid #c8d0dc !important;
    padding: 7px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    box-sizing: border-box !important;
}

.cleditorGroup {
    display: inline-flex !important;
    gap: 4px !important;
    margin-right: 5px !important;
    padding-right: 6px !important;
    border-right: 1px solid #ccd3df !important;
}

.cleditorButton,
.cleditorButton div {
    text-indent: 0 !important;
}

.cleditorButton {
    width: 32px !important;
    height: 28px !important;
    min-width: 32px !important;
    min-height: 28px !important;
    background: linear-gradient(#ffffff, #e4e9f0) !important;
    border: 1px solid #b8c0cc !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.cleditorButton:hover {
    background: linear-gradient(#fff7ef, #ffd8b8) !important;
    border-color: #ff8a21 !important;
    color: #111 !important;
}

.cleditorButton:active {
    transform: translateY(1px);
}

.cleditorDisabled {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
}

.cleditorButton::before {
    content: "•";
    display: block;
    line-height: 1;
}

/* Toolbar symbols by title */
.cleditorButton[title*="Bold"]::before { content: "B"; font-weight: 900; }
.cleditorButton[title*="Italic"]::before { content: "I"; font-style: italic; }
.cleditorButton[title*="Underline"]::before { content: "U"; text-decoration: underline; }
.cleditorButton[title*="Strikethrough"]::before { content: "S"; text-decoration: line-through; }

.cleditorButton[title*="Font"]::before { content: "F"; }
.cleditorButton[title*="Size"]::before { content: "T±"; font-size: 11px; }
.cleditorButton[title*="Style"]::before { content: "¶"; font-size: 17px; }
.cleditorButton[title*="Paragraph"]::before { content: "¶"; font-size: 17px; }

.cleditorButton[title*="Color"]::before { content: "A"; color: #005cff; }
.cleditorButton[title*="Highlight"]::before { content: "▣"; }

.cleditorButton[title*="Bullets"]::before,
.cleditorButton[title*="Bullet"]::before { content: "•"; font-size: 20px; }

.cleditorButton[title*="Numbering"]::before,
.cleditorButton[title*="Number"]::before { content: "1."; }

.cleditorButton[title*="Outdent"]::before { content: "⇤"; font-size: 17px; }
.cleditorButton[title*="Indent"]::before { content: "⇥"; font-size: 17px; }

.cleditorButton[title*="Left"]::before { content: "↤"; font-size: 17px; }
.cleditorButton[title*="Center"]::before { content: "↔"; font-size: 17px; }
.cleditorButton[title*="Right"]::before { content: "↦"; font-size: 17px; }
.cleditorButton[title*="Justify"]::before { content: "☰"; }

.cleditorButton[title*="Undo"]::before { content: "↶"; font-size: 18px; }
.cleditorButton[title*="Redo"]::before { content: "↷"; font-size: 18px; }

.cleditorButton[title*="Rule"]::before { content: "―"; }
.cleditorButton[title*="Image"]::before { content: "IMG"; font-size: 9px; }
.cleditorButton[title*="Link"]::before { content: "🔗"; font-size: 14px; }
.cleditorButton[title*="Unlink"]::before { content: "⛓"; font-size: 14px; }

.cleditorButton[title*="Cut"]::before { content: "✂"; }
.cleditorButton[title*="Copy"]::before { content: "⧉"; }
.cleditorButton[title*="Paste"]::before { content: "▣"; }
.cleditorButton[title*="Print"]::before { content: "⎙"; }
.cleditorButton[title*="Source"]::before { content: "</>"; font-size: 10px; }

/* Generic fallback for other old toolbar buttons */
input[type="button"][title],
button[title],
a[title].cleditorButton {
    min-width: 32px;
    min-height: 28px;
}

/* Buttons */
.fpa_link,
.btn-copy,
.delete_confirm_btn,
input[type="submit"],
button,
#save {
    border-radius: 6px !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    background: linear-gradient(#ffb36f, #ff7b1a) !important;
    color: #fff !important;
    font-family: ixb, Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
}

.fpa_link:hover,
.btn-copy:hover,
.delete_confirm_btn:hover,
input[type="submit"]:hover,
button:hover,
#save:hover {
    filter: brightness(1.06);
}

/* Admin menu readability */
.menu_bg {
    max-width: 960px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.menu_center {
    width: calc(100% - 100px) !important;
}

.menu_txt {
    font-family: ixb, Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Tables */
table {
    border-collapse: collapse;
}

td,
th {
    font-family: ixr, Arial, Helvetica, sans-serif;
}

/* Mobile safety */
@media (max-width: 760px) {
    body {
        font-size: 13px;
    }

    .center_box,
    .center_box2,
    .top_box,
    .top_box2,
    .bottom_box,
    .linia,
    .linia2 {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }

    .top_txt {
        font-size: 22px !important;
    }

    .cleditorButton {
        width: 34px !important;
        height: 30px !important;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    textarea {
        max-width: 100% !important;
    }
}