.cks-story_content {
   display: flex;
   gap: 22px;
 }

 .cks-story-user {
   width: 75px;
   height: 75px;
   border-radius: 16px;
   overflow: hidden;
 }

 .cks-story-editor {
   padding: 18px 0px;
 }

 .cks-story-editor textarea {
   font-size: 22px;
   line-height: 24px;
   color: var(--black);
   font-weight: 500;
   resize: none;
   box-shadow: none;
   height: initial;
   width: 100%;
   min-height: calc(1.5em * 2);
   overflow: hidden;
   word-break: normal;
   overflow-wrap: normal;
   hyphens: none;
 }

 #cks-story-count {
   margin-top: 6px;
   text-align: right;
   font-size: 12px;
   color: #888;
   transition: color .2s;
 }

 .cks-story-media {
   display: flex;
   gap: 16px;
   align-items: center;
   justify-content: space-between;
   position: relative;
   overflow: visible;
 }

 .cks-media-button {
   cursor: pointer;
   transition: .2s;
   height: 100%;
   display: flex;
   align-items: center;
   padding: 0 9px 0 3px;
 }

 .cks-media-button svg {
   width: 25px;
   height: 25px;
   flex-shrink: 0;
   color: var(--purple);
 }

 #cks-story-count.warning {
   color: #ff9800;
 }

 #cks-story-count.danger {
   color: #f44336;
   font-weight: 600;
 }

 /*
    |--------------------------------------------------------------------------
    | Vista previa multimedia
    |--------------------------------------------------------------------------
    */

 #cks-story-preview {
   width: 65px;
   aspect-ratio: 1/1;
   border-radius: 12px;
   background: #111;
   display: none;
   align-items: center;
   justify-content: center;
   position: relative;
   margin-right: auto;
 }

 #cks-story-preview img,
 #cks-story-preview video {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   object-position: center;
   border-radius: inherit;
 }

 #cks-preview-image,
 #cks-preview-video {
   display: none;
   width: 100%;
   height: auto;
   border-radius: 12px;
 }

 #cks-remove-media {
   display: none;
   border: 0;
   border-radius: 50%;
   background: var(--purple);
   cursor: pointer;
   position: absolute;
   z-index: 9;
   top: -6px;
   right: -9px;
   color: var(--white);
   padding: 2px;
 }

 #cks-remove-media svg {
   width: 16px;
   height: 16px;
 }

 /*
    |--------------------------------------------------------------------------
    | Mensajes del formulario
    |--------------------------------------------------------------------------
    */

 #cks-story-message {
   display: none;
   margin-top: 10px;
   padding: 10px 12px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 500;
 }

 #cks-story-message.error {
   display: block;
   background: #4a1111;
   border: 1px solid #b32626;
   color: #ffd4d4;
 }

 #cks-story-message.success {
   display: block;
   background: #103d1f;
   border: 1px solid #1d7c39;
   color: #d6ffe2;
 }


 /*
    |--------------------------------------------------------------------------
    | Spinner botón publicar
    |--------------------------------------------------------------------------
    */

 .cks-story-submit {
   display: flex;
 }

 .cks-story-submit:disabled {
   font-size: 16px;
   line-height: 16px;
   font-weight: 500;
   border: 1px solid;
   border-radius: 50px;
   padding: 12px 16px;
   background: transparent;
   opacity: .7;
 }

 .cks-story-submit:not(:disabled) {
   font-size: 16px;
   line-height: 16px;
   font-weight: 500;
   color: var(--purple);
   border: 1px solid var(--purple);
   border-radius: 50px;
   padding: 12px 16px;
   background: transparent;
   cursor: pointer;
 }

 .cks-story-submit:not(:disabled):hover {}

 .cks-story-submit.loading {
   opacity: .7;
   cursor: wait;
   pointer-events: none;
 }

 .cks-story-submit .cks-spinner {
   display: none;
   width: 16px;
   height: 16px;
   margin-right: 8px;
   border: 2px solid rgba(213, 95, 95, 0.3);
   border-top-color: var(--purple);
   border-radius: 50%;
   animation: cks-spin .7s linear infinite;
   vertical-align: middle;
 }

 .cks-story-submit.loading .cks-spinner {
   display: inline-block;
 }

 .cks-story-submit.loading .cks-text {
   opacity: .9;
 }

 @keyframes cks-spin {
   to {
     transform: rotate(360deg);
   }
 }

 /*
    |--------------------------------------------------------------------------
    | Styloes select TOM para admin
    |--------------------------------------------------------------------------
    */

 .cks-story-author label {
   display: block;
   margin-bottom: 8px;
   font-size: 13px;
   font-weight: 600;
   color: var(--gray);
 }

 .cks-story-author select {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid #ddd;
   border-radius: 10px;
   background: #fff;
   font-size: 15px;
 }

 .ts-wrapper.single .ts-control {
   border: 1px solid var(--lines);
   border-radius: 14px;
   min-height: 48px;
   box-shadow: none;
   padding: 0 14px;
   background: var(--white);
 }

 .ts-wrapper.focus .ts-control {
   border-color: var(--purple);
   box-shadow: none;
 }

 .ts-control {
   min-width: 200px;
 }

 .ts-control>* {
   display: flex;
   align-items: center;
 }

 .ts-control input {
   font-size: 15px;
 }

 .ts-dropdown {
   border-radius: 14px;
   border: 1px solid var(--lines);
   box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
   overflow: hidden;
 }

 .ts-dropdown .option {
   padding: 12px 14px;
 }

 .ts-dropdown .option.active {
   background: rgba(0, 0, 0, .04);
 }