@charset 'UTF-8';

@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans+KR&family=Gothic+A1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cabin&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Amiko&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Monoton&display=swap");

@import url("https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" );
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" );

@import url("/static/css/fs_upload.css" );
@import url("/static/css/fs_upload_theme.css" );
@import url("/static/app_project/css/project.css" );
@import url("/static/app_qnaire/css/qnaire.css" );
@import url("/static/app_survey/css/survey.css" );
@import url("/static/app_monitoring/css/monitoring.css" );

html, body { font-family: Lato, 'Noto Sans KR'; font-size: 16px; margin: 0 !important; padding: 0 !important; }

textarea { resize: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: gray; }
input::placeholder { font-size: small; color: gray; }
.modal .modal-header { cursor: move; }

:root {
  --dv-origin: #086da3; --dv-origin-hover: #065c8a;
  --dv-dark1: #343a40; --dv-dark2: #373f46; --dv-dark3: #575d64; /* 48525b -> 575d64 */
  --dv-pop1: #e6e6e6; --dv-pop2: #73808c;
  --dv-ipsos1: #0fafa9; --dv-ipsos2: #3948a4;
  --dv-hr1: #22262a; --dv-hr2: #454d54;
  --dv-btn-default1: #ced4da; --dv-btn-default2: #dfe3e8; 
  --dv-border: #dee2e6; --dv-card-border: #c9c9c9;
  --dv-read: #e9ecef; --dv-layer: #076597; --dv-top: #e6f2ff; --dv-mean: #fff3cd; /* read=e5e5e5*/
  --tab-layer: gray; --tab-header: #999999;
  --dv-light: #f2f2f2; --dv-light2: #f9f9f9;
  --bs4-primary: #007bff; --bs4-success: #28a745; --bs4-warning: #ffc107; --bs4-danger: #dc3545; 
  --bs4-info: #17a2b8; --bs4-dark: #343a40; --bs4-light: #f8f9fa;

  --dv-nh: #005bac;
  --dv-drop: #eef6f3;
}

.font-monoton { font-family: Monoton; }
.font-noto-sans-kr { font-family: 'Noto Sans KR'; }

.f70 { font-size: 70%; }

.text-gray { color: gray !important; }
.text-lightgray { color: lightgray !important; }

.py-12 { padding-top: 12px; padding-bottom: 12px; }
.bg-gray { background-color: gray; }
.bg-bs4-dark { background-color: var(--bs4-dark); }
.bg-transparent { background-color: transparent; }

.w-sm { min-width: 100px; width: 100px; }
.w-md { min-width: 180px; width: 180px; }
.w-fixed-50 { width: 50px; }

.dv-spinner-wrap { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; text-align: center; background-color: rgba(0,0,0,0.3); z-index: 99999; }
.dv-spinner { position: relative; display: inline-block; top: 40%; text-align: center; color: white; text-shadow: 0 0 5px #343a40; opacity: 1 !important; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DataView
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.dv-floating { height: 58px !important; border-radius: 6px; padding: 8px; }
.dv-floating.focus { outline: 3px solid rgba(255, 193, 7, 0.35); border-style: none !important; }
.dv-floating {
  >* { color: white; background-color: transparent !important; }
  >.dv-label { padding: 8px 4px; white-space: nowrap; transition: transform 0.2s; }
  >.dv-label.slide-top { position: absolute; font-size: 85%; color: lightgray; transform: translateY(-8px); transition: transform 0.2s; }
  >.dv-form { border: none; padding-left: 4px; padding-right: 4px; }
  >.dv-form.slide-top { margin-top: 16px; }
  >.dv-form:focus, >.dv-form:active:focus, >.dv-form.active:focus, >.dv-form.focus, >.dv-form:active.focus, >.dv-form.active.focus { outline: none !important; box-shadow: none; }
  >.dv-pw { font-size: 85%; color: lightgray; margin-top: 20px; }
}
.dv-none { display: none; }
.dv-nowrap { white-space: nowrap; }
.dv-input-underline { width: auto; border: none; border-bottom: 1px solid var(--dv-border); border-radius: 0; } 
.dv-collapse { transition: transform 0.2s; }
.dv-collapse.rotate { transform: rotate(45deg); }

.btn-default:hover { background-color: var(--bs4-light); }
[contentEditable]:empty:not(:focus):before { font-size: small; color: gray; content: attr(placeholder) }
.place-holder:empty:not(:focus):before { font-size: small; color: gray; content: attr(placeholder) }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Upload
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.fs-upload.fs-light { background-color: white; }
.fs-upload.fs-light .fs-upload-target { border: 2px dashed rgba(13, 110, 253, 0.5); border-radius: 6px; }
.fs-upload.fs-light .fs-upload-target:hover { border: 2px dashed rgba(13, 110, 253, 1); background-color: rgba(13, 110, 253, 0.1); } /*rgba(4, 170, 109, 1)*/
.filelist { margin: 0; }
.filelist {
  >li { position: relative; font-size: small; background-color: white; margin: 5px 0; }
  >li { 
    >.content { position: relative; padding: 0 10px; overflow: hidden; z-index: 1; }
    >.content {
      >.file { float: left; color: white; width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: transparent; }
      >.progress { float: right; color: var(--bs4-warning); white-space: nowrap; background-color: transparent; }
    }
    .bar { 
      position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(13, 110, 253, 1); 
      z-index: 0; -webkit-transition: width 0.1s linear; transition: width 0.1s linear; 
    }
  }
}
.preview-wrap { background-color: var(--bs4-dark); overflow: hidden; }
.preview-image-size { font-size: small; color: var(--bs4-danger); text-align: center; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Login
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.login-body { background: url("/static/img/body-bg.png") center top/auto no-repeat; } /* margin-bottom: 100px; padding-top: 0; */
.login-logo {
  >.login-img { height: 30px; }
  >.login-text { line-height: 0.8; }
}
.login-box { width: 600px; padding: 50px; background-color: rgba(0,0,0,0.3); backdrop-filter: blur(5px); }
.login-box h1.spacing { letter-spacing: 15px; }
.login-footer { color: white; text-align: center; letter-spacing: 3px; margin-top: 4px; }
.login-footer .company { margin-left: 6px;}
.pw-forget { display: block; text-align: right; margin-top: 3px; }
.pw-forget {
  >a { color: darkgray; font-style: italic; }
  >a:hover { color: white; }
}
p.annotation { font-size: 85%; color: var(--dv-dark3); }
.input-group .check-device { color: darkgray; cursor: pointer; }
.input-group.active {
  >.check-device { color: var(--bs4-primary); font-weight: bold; }
  >.form-control { color: var(--bs4-primary); }
}
.captcha-refresh { font-size: 85%; color: var(--dv-dark3); background-color: white; }
.btn-send { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; }
.btn-send.kakao>img { height: 24px; border-radius: 8px; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Change Password
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.pw-wrap {
  >* { color: white !important; background-color: transparent !important; }
  >a.dv-pw { font-size: 85%; }
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Menu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.navbar { background-color: white; }
.navbar .container-fluid { padding: 0 20px; }
.navbar .container-fluid {
  .navbar-toggler { border: none; padding: 0; }
  .navbar-toggler:focus, .navbar-toggler:active:focus, .navbar-toggler.active:focus, .navbar-toggler.focus, .navbar-toggler:active.focus, .navbar-toggler.active.focus { outline: none !important; box-shadow: none; }
  .navbar-brand { min-width: 100px; margin-right: 30px; }
  .navbar-brand>img { height: 30px; }
  .navbar-text { position: absolute; font-size: 55%; letter-spacing: 3px; color: #666666; text-shadow: -1px -1px #e6e6e6; margin: 1.5px 0 0 35px; padding: 0; }
  .nav-item>.nav-link { padding: 18px 30px !important; }
  .nav-item>.nav-link:hover { color: white; background-color: var(--bs4-dark); }
  .dv-menu-clip { font-size: small; display: flex; }
  .dv-menu-clip .clip { white-space: nowrap; }
}
.navbar-mobile { position: fixed; left: 0; width: 100%; background-color: var(--bs4-dark); z-index: 999; }
.navbar-mobile.flex-column>ul.mobile:not(:first-child) { margin-top: 0; }
.navbar-mobile.flex-column>ul.mobile:not(:last-child) { margin-bottom: 0; }
.navbar-mobile {
  >ul.mobile { font-size: small; color: lightgray; list-style-type: none; margin: 15px 0; padding: 0; }
  >ul.mobile {
    >li>a { white-space: nowrap; padding: 5px 0 5px 30px; }
    >li>a:hover { color: white; }
  }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Contents
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.container { min-height: 100vh; padding-bottom: 200px; }
.error-404 { height: 100vh; text-align: center; background-color: whitesmoke; padding-top: 10vh; } /* display: flex; align-items: center; justify-content: center; */
.error-404 {
  .key { font-size: 108px; font-weight: bold; }
  .value { font-size: 28px; margin-top: -40px; }
  .err-msg { margin-top: 50px; }
}

.page-header { padding-top: 30px; }
.page-header {
  .page-title { margin: 0; }
  .btn-page-wrap {
      .btn-page { font-size: small; min-width: 80px; }
    .btn-page:not(:last-child) { margin-right: 1px; }
  }
}
.page-header2 { margin-top: 30px; }
.page-header3 { margin-top: 10px; }
.page-body { margin-top: 30px; }
.page-header3, .page-body {
  .form-page { min-width: 100px; width: auto; }
  .form-page:not(:last-child) { margin-right: 5px; }
}
.page-footer { width: 100%; font-size: small; color: white; text-align: center; padding: 15px 0; background-color: var(--bs4-dark); }
.page-footer .dv-name-style { letter-spacing: 5px; }

.page-side { 
  position: fixed; bottom: 0; left: 0; width: 0; height: 100vh; color: white; 
  background-color: rgba(89, 89, 89); z-index: 99; transition: 0.2s; /*overflow: hidden; */
}
.page-side {
  .side-top { position: relative; width: 300px; padding: 10px; }
  .side-top .side-info {
    #surveyCode { font-size: small; color: var(--bs4-dark); }
    .side-pin { color: darkgray; opacity: 0; }
    .side-pin i.fa-thumbtack:hover { color: gray; }
  }
  
  .side-menu { position: relative; margin: 0; padding: 0; overflow: auto; }
  .side-menu::-webkit-scrollbar { width: 6px; height: 6px; }
  .side-menu::-webkit-scrollbar-thumb { background-color: darkgray; border-radius: 0; -webkit-border-radius: 0; }
  .side-menu::-webkit-scrollbar-track { background-color: transparent; }
  .side-menu::-webkit-scrollbar-corner { background-color: transparent; } /* x,y 교차 점 (우측 하단 교차점)*/
  .side-menu {
    .badge { padding-left: 5px; padding-right: 5px; }

    >li { margin-bottom: 0; }
    >li:last-child { margin-bottom: 300px; }

    .question { font-size: 11px; padding: 3px 10px; }
    .question:first-child { margin-top: 7px }
    .question:last-child { margin-bottom: 7px; }
    .question:hover { background-color: rgba(64, 64, 64); }
    .question {
      .i-move { font-size: 9px; color: gray; }
      .i-move:hover { color: darkgray; }
      .q-type { width: 50px; color: var(--bs4-dark); background-color: var(--bs4-light); }
      .q-type.q-40 { background-color: var(--bs4-warning); } /* 로테이션 */
      .q-type.q-98 { background-color: darkgray; } /* 더미형 */
      .q-type.q-99 { background-color: var(--bs4-info); } /* 안내형 */
      .opt-res { width: 24px; text-align: center; color: var(--bs4-light); border: 1px solid var(--bs4-light); }
      .opt-group { color: var(--bs4-warning); border: 1px solid var(--bs4-warning); }
      .opt-rotation { color: var(--bs4-dark); background-color: var(--bs4-warning); }
      .q-name:hover { color: white; text-decoration: underline; }
      .a-code:hover { color: var(--bs4-warning); }
      .a-code { width: 13px; }
      .a-wrap-icon .dv-collapse { -ms-transition: transform 0.2s; -moz-transition: transform 0.2s; -webkit-transition: transform 0.2s; transition: transform 0.2s; }
      .a-wrap-icon .dv-collapse.rotate { -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
      .a-wrap-icon .dv-collapse:hover { color: var(--bs4-warning); }
    }
    >li.param .q-param { background-color: var(--bs4-success); } /* 파라미터 */

    .answer-wrap { height: 0; font-size: 11px; text-align: right; background-color: rgba(99, 99, 99); padding: 0 10px; overflow: hidden; }
    .answer-wrap {
      >div:first-child { margin-top: 3px; }
      >div:last-child { margin-bottom: 3px; }
      .a-name { color: lightgray; }
      .a-name:hover { color: white; text-decoration: underline; }
      .d-code:hover { color: var(--bs4-warning); }
      .d-code { width: 13px; margin-right: 14px; }
      .mr-34 { margin-right: 34px; }
    }
  }

  .side-bottom .delete-item { font-size: 16px; background-color: rgba(220, 53, 69, 0.6); }
  .side-bottom .delete-item:hover { background-color: rgba(220, 53, 69, 0.9); }
}

.side-collapse { position: fixed; top: 0; left: 0; font-size: 18px; color: gray; line-height: 0.4; z-index: 99; transition: 0.2s; }
.side-collapse:hover { color: darkgray; }
.side-collapse.rotate { transform: rotate(180deg); }

.dv-tooltip { 
  visibility: hidden; position: absolute; top: 0; left: 0; z-index: 997; opacity: 0; transition: opacity 0.2s;
  min-width: 120px; max-width: 480px; font-size: 13px; color: #fff; background-color: rgba(64, 64, 64, 0.9); 
}
.dv-tooltip * { color: #fff !important; }
.q-text.dv-tooltip { padding: 5px 10px; border-radius: 6px; }
.q-text.dv-tooltip::after { 
  content: ""; position: absolute; top: 11px; left: 0%; margin-left: -10px; 
  border-width: 5.5px; border-style: solid; border-color: transparent #555 transparent transparent;
}
.code-label { position: fixed; font-size: 13px; color: var(--bs4-dark); padding: 5px 0; transition: 0.2s; z-index: 99; }
.code-label {
  >div>a.code-close { color: rgba(89, 89, 89, 0.9); margin-right: 10px; }
  >div>a.code-close:hover { color: whitesmoke; }
  >li { padding: 2px 5px; }
  >li>.badge.code { color: white; background-color: var(--bs4-dark); }
  >li>.badge.label { color: var(--bs4-dark); }
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Quill-Editor
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
textarea.dv-code-view:focus { outline: none; }
.ql-snow {
  >button { color: #444444; }

  /* button hover */
  >button, .ql-picker-label { border-radius: 4px; }
  >button:hover, .ql-picker-label:hover { background-color: #e6e6e6; }

  /* button disabled */
  >button:disabled { color: #b7b7b7; }
  >button:disabled:hover { color: #b7b7b7; background-color: transparent; cursor: no-drop; }
  >button:disabled>svg>* { stroke: #b7b7b7; }
  >button:disabled:hover>svg>* { stroke: #b7b7b7 !important; }
  
  .ql-picker-label[disabled='disabled'] { color: #b7b7b7 !important; border: none; }
  .ql-picker-label[disabled='disabled']:hover { color: #b7b7b7; background-color: transparent; cursor: no-drop; }
  .ql-picker-label[disabled='disabled']:hover i { color: #b7b7b7; background-color: transparent; cursor: no-drop; }
  
  .ql-picker-label[disabled='disabled'] * { stroke: #b7b7b7; border: none; }
  .ql-picker-label[disabled='disabled']:hover * { stroke: #b7b7b7 !important; background-color: transparent; cursor: no-drop; }
  
  /* color, background, dv-bg-color */
  .ql-color, .ql-background, .dv-bg-color {
    >.ql-picker-label { padding-top: 0; }

    >.ql-picker-options { width: 212px; }
    >.ql-picker-options>.ql-picker-item:nth-child(n+61):nth-child(-n+70) { margin-top: 10px; }
    >.ql-picker-options>.ql-picker-item[data-value=color-picker]:before { content: 'Pick Color'; }
    >.ql-picker-options>.ql-picker-item[data-value=color-picker] {
      width: 100% !important;
      height: 25px !important;
      text-align: center;
      color: blue;
      text-decoration: underline;
      background: none !important;
    }
  }

  /* dv-bg-color */
  .dv-bg-color {
    .ql-picker-label[aria-expanded='true'] .ql-picker-label:focus { color: lightgray; }
    .ql-picker-label .ql-color-label i { margin-top: 5px; }
    .ql-picker-options [data-value='transparent'] { background-image: url("/static/img/transparent.png"); }
  }

  /* bold/dv-table, clean */
  .ql-bold, .ql-dv-table { font-size: 90%; padding-top: 2px !important; }
  .ql-code-block { font-size: 80%; padding-top: 4px !important; }
  .dv-html { font-size: 80%; padding-top: 4px !important; }
  .ql-clean  { padding-top: 1px !important; }

  /* Font-Family */
  .ql-picker.ql-font .ql-picker-label[data-value]::before,
  .ql-picker.ql-font .ql-picker-item[data-value]::before { content: attr(data-value) !important; }
  .ql-picker.ql-font { width: 150px !important; white-space: nowrap; }

  /* Font-Size */
  .ql-picker.ql-size .ql-picker-label[data-value]::before,
  .ql-picker.ql-size .ql-picker-item[data-value]::before { content: attr(data-value) !important; }
  .ql-picker.ql-size { width: 80px !important; white-space: nowrap; }

  /* Font-Header */
  .ql-picker.ql-header { width: 120px !important; white-space: nowrap; }

  /* align */
  .ql-align>.ql-picker-label { padding-top: 0; }

  /* code-view */
  /* .dv-html:not(:focus) { color: black !important; } */
  .dv-code-view { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 10px; border: none; background-color: whitesmoke; }
  .dv-code-view.active { display: initial; }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
view-port
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media (min-width: 1600.5px), (min-height: 1020.5px) {
  .login-body { background-size: cover; }
}

@media (max-width: 767.5px) {
  .login-logo { height: 70px; }
  .login-box { width: 100%; }

  .navbar .container-fluid { padding: 0 10px; }
  .navbar .container-fluid {
    .navbar-nav, .dv-menu-clip { display: none; }
  }
}

@media (max-width: 500.5px) {
  .login-logo { height: 60px; }
  .login-box { width: 100%; padding: 50px 20px; }
}

@media (max-width: 400.5px) {
  .page-header { flex-direction: column; align-items: flex-start !important; }
  .page-header>.btn-page-wrap { margin-top: 10px; }
}

@media (max-width: 300.5px) {
  #qName { width: 120px !important; }
}



@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    /* table, thead, tbody, th, td, tr {
      display: block;
    } */
    /* Hide table headers (but not display: none;, for accessibility) */
/*    
    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
    tr {
      margin: 0 0 1rem 0;
    }
    tr:nth-child(odd) {
      background: #ccc;
    }
    td {
      //Behave  like a "row"
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 50%;
    }
    td:before {
      //Now like a table header
      position: absolute;
      //Top/left values mimic padding
      top: 0;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
    }
*/
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
/* 
    td:nth-of-type(1):before {
      content: "First Name";
    }
    td:nth-of-type(2):before {
      content: "Last Name";
    }
    td:nth-of-type(3):before {
      content: "Job Title";
    }
    td:nth-of-type(4):before {
      content: "Favorite Color";
    }
    td:nth-of-type(5):before {
      content: "Wars of Trek?";
    }
    td:nth-of-type(6):before {
      content: "Secret Alias";
    }
    td:nth-of-type(7):before {
      content: "Date of Birth";
    }
    td:nth-of-type(8):before {
      content: "Dream Vacation City";
    }
    td:nth-of-type(9):before {
      content: "GPA";
    }
    td:nth-of-type(10):before {
      content: "Arbitrary Data";
    }
*/
}