/*

This page was created on 12/23/21.  It should contain all styling used for the more "modern" version of subpoenafactory.
The following sections are below: 
 - Bootstrap Overrides
 - Universal
 - Fonts
 - Header
 - Footer
 - index.php
 - checklist.php


*/


/* --- 

 ____   ___   ___ _____ ____ _____ ____      _    ____  
| __ ) / _ \ / _ \_   _/ ___|_   _|  _ \    / \  |  _ \ 
|  _ \| | | | | | || | \___ \ | | | |_) |  / _ \ | |_) |
| |_) | |_| | |_| || |  ___) || | |  _ <  / ___ \|  __/ 
|____/ \___/ \___/ |_| |____/ |_| |_| \_\/_/   \_\_|    

--- */

.bg-primary {
    background-color: #1D2951 !important;
}

.fixed-top {
    z-index: 11;
}

.nav-item {
    margin-left: 10px;
    font-size: 0.83em;
}

.nav-item:hover {
    text-decoration: underline;
}

.carousel-item {
    background-color: #006B98;
    min-height: 100px;
}

.carousel-item .carousel-item-content {
    width: 70%;
    margin-left: 15%;
    padding-bottom: 60px;
    padding-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 1.1em;
    color: white;
}

.carousel-item .carousel-item-content img {
    width: 400px;
}

.carousel-item .carousel-item-content .index-coarousel-img-2 {
    width: 200px;
    
}

.navbar-toggler-icon::before {
    color: white !important;
}


/* --- 

 _____ ___  _   _ _____ ____  
|  ___/ _ \| \ | |_   _/ ___| 
| |_ | | | |  \| | | | \___ \ 
|  _|| |_| | |\  | | |  ___) |
|_|   \___/|_| \_| |_| |____/ 

--- */
@font-face {
    font-family: manrope;
    src: url("../Fonts/Manrope/Manrope-VariableFont_wght.ttf");
}

/* --- 

 _   _ _   _ _____     _______ ____  ____    _    _     
| | | | \ | |_ _\ \   / / ____|  _ \/ ___|  / \  | |    
| | | |  \| || | \ \ / /|  _| | |_) \___ \ / _ \ | |    
| |_| | |\  || |  \ V / | |___|  _ < ___) / ___ \| |___ 
 \___/|_| \_|___|  \_/  |_____|_| \_\____/_/   \_\_____|

--- */

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 1.1s linear infinite;
    position: fixed;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    z-index: 100000000;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

html,
body {
    height: 100%;
}

body {
    font-family: manrope;
}

article {
    display: flex;
    min-height: 100%;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
}

main {
    flex-grow: 1;
}

.header-buffer, main, footer {
    flex-shrink: 0;
}

#content::after {
    content: "";
    display: block;
}


table {
    width: 100%;
    border-collapse: collapse;
}

table td {
    vertical-align: top;
}

.bold {
    font-weight: bold;
}

.show-mobile {
    display: none;
}

.header-buffer {
    width: 100%;
    height: 58px;
}

#alert-box {
    position: fixed;
    width: 350px;
    left: calc(50% - 175px);
    border: 1px solid gray;
    text-align: center;
    z-index: 2;
    top: 140px;
    background-color: white;
    padding: 0 20px 20px 20px;
}

#alert-box img {
    width: 80px;
}

a:hover {
    cursor: pointer;
}


textarea {
    resize: none;
    font-size: 100%;
}

.doc-preview-container {
    width: 8.5in;
    margin-top: 30px;
    margin-left: calc(50% - 4.25in);
    margin-bottom: 30px;
    border: 1px solid black;
    background-color: white;
    font-family: Times New Roman;
    font-size: 10pt;
    padding: 0.5in;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.pdf {
    width: 7.48in;
    overflow-x: none;
    background-color: white;
    margin: 0;
    font-size: 12pt;
    font-family: Arial;
}

.nav-icon {
    height: 40px;
}

.contact-form label {
    color: gray;
    font-size: 0.9em;
    width: 100%;
    text-align: left;
    margin-bottom: 0;
}

.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea {
    width: 100%;
    margin-bottom: 13px;
}

.texture-background {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#login-form img {
    width: 25%;
}

#login-form input[type=text],
#login-form input[type=password] {
    display: block;
    margin-bottom: 15px;
    width: 100%;
}

#login-form span {
    font-size: 0.8em;
    font-weight: bold;
    text-align: left;
    vertical-align: 1px;
}

#login-error {
    color: red;
    font-weight: bold;
    font-size: 0.9em;
}

/* --- 

 ___ _   _ ____  _______  __
|_ _| \ | |  _ \| ____\ \/ /
 | ||  \| | | | |  _|  \  / 
 | || |\  | |_| | |___ /  \ 
|___|_| \_|____/|_____/_/\_\

--- */
.carousel-item-content .nav-item {
    margin-left: 0;
    margin-right: 15px;
    margin-bottom: 15px;
}

.carousel-item-content .nav-item .nav-link {
    color: white;
    border: 1px solid white;
    border-radius: 15px;
    padding: 5px 15px;
}

.carousel-item-content .tab-content {
    margin-top: 10px;
}

.turn-the-key {
    padding: 20px;
    background-color: white;
    border: 1px solid black;
    color: black;
    font-size: 0.85em;
    min-width: 350px;
    margin-left: 20px;
}

.carousel-item-content .turn-the-key ul { 
    list-style-type: "✔  "; 
}

.carousel-item-content .turn-the-key h5 { 
    text-decoration: underline;
    text-align: center;
}

.index-panel-section {
    width: 100%;
    padding: 90px 15%;
    border-top: 1px solid gray;
    position: relative;
    font-family: manrope;

}


.index-panel-section:nth-child(even) {
    background-color: blue;
    background-image: url("../Textures/TextureBlue.png");  
    color: white;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.index-panel-section h2,
.index-qa h2 {
    text-align: center;
}

.index-panel-img-container {
    position: relative;
    width: 100%;
    height: 150px;
    text-align: center;
    background-color: white;
    border-bottom: 1px solid gray;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

.index-panel-img-container img {
    max-height: 100%;
    max-width: calc(100% - 30px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    cursor: zoom-in;
}

.index-panel-body {
    padding: 5px 15px;
    color: black;
}

.index-panel h5 {
    background-color: #1D2951;
    color: white;
    width: 100%;
    text-align: center;
    padding: 5px 10px;
}

.index-panel-body p {
    text-align: left;
}

.scrolling-panels {
    box-sizing: border-box;
    overflow-x: scroll;
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 15px;
}

.index-panel-section .index-panel {
    scroll-snap-align: start;
    border: 1px solid gray;
    background-color: white;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(33.333% - 30px);
    margin: 15px;
    border-radius: 15px;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
}

.scrolling-panels {
    -ms-overflow-style: none;
}

.scrolling-panels::-webkit-scrollbar {
    display: none;
  }


.index-panel-btn-right {
    position: absolute;
    top: 45%;
    color: gray;
    border: none;
    background-color: transparent;
    font-size: 3.5em;
    right: 11.5%;
    cursor: pointer;
    
}

.index-panel-btn-left {
    position: absolute;
    top: 45%;
    color: gray;
    border: none;
    background-color: transparent;
    font-size: 3.5em;
    left: 11.5%;
    cursor: pointer;
}

.index-qa {
    padding: 90px 15%;
    background-color: #F1F4F7;
    border-top: 1px solid gray;
}

.index-qa .card {
    background-color: #006B98;
}

.index-qa .card .collapse,
.index-qa .card .collapsing {
    background-color: white;
}

.index-qa button {
    color: white;
    white-space: normal;
}

.index-qa button:hover {
    color: white;
}

.index-qa p {
    text-align: center;
}

.index-contact {
    padding: 90px 15%;
    border-top: 1px solid gray;
    background-color: #A9AABC;
}

.inef-calc-area p {
    text-align: center;
    border-bottom: 1px solid rgb(182, 182, 182);
}

.inef-calc-area input[type=number] {
    font-size: 0.9em;
    width: 100px;
    margin-left: 10px;
}

.inef-calc-area .info-table td {
    vertical-align: top;
    text-align: left;
    padding-left: 5px;
}

.inef-calc-area .info-table tr td:nth-child(3) {
    padding-top: 5px;
    font-size: 0.9em;
}

.inef-calc-area .info-table .calc-results-table {
    margin-top: 20px;
}

.inef-calc-area .info-table .calc-results-table td {
    border: 1px solid gray;
    padding: 5px;
    font-size: 1.0em;
}

.inef-calc-area .info-table .calc-results-table tr td:nth-child(3) {
    font-size: 1.0em;
}

/*

 ____  ____   ___      _ _____ ____ _____ ____  
|  _ \|  _ \ / _ \    | | ____/ ___|_   _/ ___| 
| |_) | |_) | | | |_  | |  _|| |     | | \___ \ 
|  __/|  _ <| |_| | |_| | |__| |___  | |  ___) |
|_|   |_| \_\\___/ \___/|_____\____| |_| |____/

*/

.project-table {
    text-align: left;
}

.project-messages {
    font-size: 0.9em;
    position: relative;
    height: 75vh;
    overflow-y: auto;
}

.project-posted-by {
    width: 100%;
    text-align: right;
    font-size: 0.8em;
    border-bottom: 1px dotted gray;
    padding-right: 10px;
    margin-top: 15px;
    color: rgb(77, 77, 77);
}

/*

  ____ _   _ _____ ____ _  ___     ___ ____ _____ 
 / ___| | | | ____/ ___| |/ / |   |_ _/ ___|_   _|
| |   | |_| |  _|| |   | ' /| |    | |\___ \ | |  
| |___|  _  | |__| |___| . \| |___ | | ___) || |  
 \____|_| |_|_____\____|_|\_\_____|___|____/ |_|  

*/

.bookmark-icon {
    height: 23px;
    cursor: pointer;
}

.checklist-top {
    position: fixed;
    border-bottom: 1px solid gray;
    width: 100%;
    top: 58px;
    z-index: 2;
    background-color: white;
    padding: 10px 10px 0px 10px;
}

.checklist-top label {
    margin-right: 20px;
}

.checklist-top button {
    float: right;
    margin-left: 15px;
}

.checklist-nav {
    background-color: #1D2951;
    color: white;
    margin-top: 5px;
    margin-left: -10px;
    margin-right: -10px;
    padding: 5px;
    min-height: 40px;

}

.checklist-nav .btn-group {
    position: absolute;
    top: 52px;
}

.checklist-nav img {
    height: 25px;
    margin-right: 10px;
    z-index: 2;
}

.checklist-nav span {
    width: 100%;
}

.checklist-nav ul {
    list-style: none;
    display: inline-block;
    margin-bottom: 0;
    width: calc(100% - 120px);
    margin-left: 120px;
}

.checklist-nav li {
    display: inline-block;
    margin-right: 17px;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 15px;
    padding: 2px 15px;
    font-size: 0.9em;
    margin-bottom: 0px;
}

.scoring-guide {
    padding: 20px;
    text-align: center;
}

.scoring-guide table {
    text-align: left;
    font-size: 0.9em;
}

.scoring-guide th {
    border: 1px solid #1D2951;
    background-color: #1D2951;
    color: white;
    padding: 5px 3px;
}

.scoring-guide td {
    border: 1px solid #1D2951;
    padding: 3px;
}

.scoring-guide tr td:first-child,
.scoring-guide tr th:first-child {
    text-align: center;
}

.scoring-guide button {
    margin-bottom: 15px;
}

.checklist-container {
    max-width: 1050px;
    text-align: left;
    margin: 30px auto;
    border: 1px solid gray;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
}

.checklist-table th {
    background-color: #F7F8FF;
    font-weight: bold;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    padding: 5px 0;
}

.checklist-table td {
    border-bottom: 1px dashed #d3d3d3;
}

.checklist-table .score-col {
    text-align: center;
}

.checklist-table textarea {
    width: calc(100% - 50px);
    margin-left: 25px;
    line-height: 1.3;
    font-size: 85%;
    font-family: monospace;
}

.eval-area {
    padding: 20px;
    width: 600px;
    margin-left: calc(50% - 300px);
}

.eval-area select {
    display: block;
}

.eval-area li {
    margin-bottom: 30px;
}

.eval-area textarea {
    width: 100%;
}

/*

 _____ _____ ____ _____ ____  
|_   _| ____/ ___|_   _/ ___| 
  | | |  _| \___ \ | | \___ \ 
  | | | |___ ___) || |  ___) |
  |_| |_____|____/ |_| |____/ 

*/

.start-test {
    text-align: center;
    padding: 40px;
}

.start-test span {
    display: block;
    font-size: 0.9em;
}

.tests-table {
    text-align: center;
}

.tests-table td {
    padding: 3px;
    border-bottom: 1px solid rgb(202, 202, 202);
}

.tests-table th {
    background-color:#1D2951;
    color: white;
    padding: 5px 3px;
}

.tests-table tr:first-of-type td {
    font-weight: bold;
    font-size: 120%;
    padding: 5px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}



.test-rules {
    max-width: 1050px;
    text-align: left;
    margin: 30px auto;
    border: 1px solid gray;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    padding: 50px;
}

.test-rules h1 {
    text-align: center;
}

.test-rules h3 {
    text-align: center;
    font-size: 1.35em;
}

.test-rules li {
    margin-bottom: 20px;
    text-align: justify;
}

.test-rules label {
    display: block;
    margin-left: 20px;
}

.quiz_table {
    font-size: 120%;
    font-family: Arial, Helvetica, sans-serif;
}

.quiz_table th {
    text-align: center;
    padding: 7px;
    font-size: 1.15em;
}

.quiz_table td {
    padding: 5px;
}

.questions_left {
    font-size: 100%;
}

.quiz_table input[type=text] {
    font-size: 110%;
}



/*

 _____ _   _ _____ ___  ____  ___    _    _     ____  
|_   _| | | |_   _/ _ \|  _ \|_ _|  / \  | |   / ___| 
  | | | | | | | || | | | |_) || |  / _ \ | |   \___ \ 
  | | | |_| | | || |_| |  _ < | | / ___ \| |___ ___) |
  |_|  \___/  |_| \___/|_| \_\___/_/   \_\_____|____/ 

*/

.tutorial_area .bookmark  {
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
    height: 35px;
}

.tutorial_table_container {
    position: absolute;
    height: calc(100% - 100px);
    overflow-y: auto;
    width: 100%;
    left: 0;
    top: 70px;
    padding: 30px;
  }

.tutorial_table td {
    padding-bottom: 20px;
    vertical-align: top;
    padding-top: 15px;
}

.tutorial_table .tutorial_txt_outlined {
    border: 1px solid gray;
    padding: 20px;
}

.tutorial_image {
    max-width: 90%;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.tutorial_area .font_size {
    text-align: center;
    position: absolute;
    top: 5px;
    right: 190px;
}

.tutorial_area .font_size span {
    display: block;
    font-size: 12pt;
    margin: 0;
    padding: 0;
    line-height: 1.0;
}

.tutorial_area .font_size button {
    border: none;
    background-color: transparent;
    font-weight: bold;
    margin: 0;
}

.tutorial-edit-area {
    width: 100%;
    padding: 30px;
}

.tutorial-step {
    border-bottom: 1px solid gray;
    padding: 20px 0;
}

.tutorial-step img {
    display: inline-block;
    width: 30px;
    cursor: pointer;
}

.tutorial-step table {
    width: 100%;
}

.tutorial-step textarea {
    width: 100%;
}

.target {
    border: solid 1px #aaa;
    height: 210px;
    width: 300px;
    border-radius: 5px;
    cursor: pointer;
    transition: 300ms all;
    position: relative;
  }
  
  .contain {
      background-size: cover;
    position: relative;
    z-index: 10;
    top: 0px;
    left: 0px;
  }
  textarea {
    background-color: white;
  }
  .active {
    box-shadow: 0px 0px 1px 1px rgba(0,0,255,.4);
  }
  
  
  .new:after {
      content: "NEW feature";
      color: white;
      letter-spacing: 1px;
      background: hsla(80, 90%, 40%, .9);
      position: absolute;
      margin: -10px 5px 0 0;
      transform: rotate(-25deg);
      padding: 2px 5px;
      border-radius: 4px;
      font-size: 10px;
      line-height: 14px;
      opacity: .85;
  }

  .remove-image {
      color: red; 
      font-size: 10pt;
      font-weight: bold;
      cursor: pointer;
  }

  .remove-image:hover {
      text-decoration: underline;
  }

/*

 _____ ____      _    ___ _   _ ___ _   _  ____   ____   ___ ____  ____  
|_   _|  _ \    / \  |_ _| \ | |_ _| \ | |/ ___| |___ \ / _ \___ \|___ \ 
  | | | |_) |  / _ \  | ||  \| || ||  \| | |  _    __) | | | |__) | __) |
  | | |  _ <  / ___ \ | || |\  || || |\  | |_| |  / __/| |_| / __/ / __/ 
  |_| |_| \_\/_/   \_\___|_| \_|___|_| \_|\____| |_____|\___/_____|_____|

*/

.training-2022 {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
}

.training-2022 h2 {
    text-align: center;
    margin: 40px;
    text-decoration: underline;
}

.training-2022 p {
    margin-bottom: 30px;
    font-size: 115%;
    text-align: justify;
}

.training-2022 hr {
    background-color: rgb(170, 170, 170);
}

.webrex_sections_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.webrex_sections_container .webrex_section_table {
    width: calc(50% - 20px);
    margin-bottom: 40px;
    border-spacing: 0;
    transition: all 0.5s;
    border-collapse: separate;
    /*box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}

.webrex_section_table th {
    background-color: #1D2951;
    color: white;
    padding: 13px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 1px solid #1D2951;
    text-align: center;
    font-size: 115%;
}

.webrex_section_table td {
    padding: 15px;
    vertical-align: top;
    border-left: 1px solid #1D2951;
    border-right: 1px solid #1D2951;

}

.webrex_section_table tr:nth-child(3) td {
    height: 190px;
}

.webrex_section_table tr:last-child td {

    border-bottom: 1px solid #1D2951;

}

.webrex_section_table ul { 
    list-style-type: "◈  "; 
}

.webrex_section_table li { 
    font-size: 110%;
    margin-bottom: 7px;
}

.webrex_section_table span {
    color: gray;
    font-size: 85%;
}

.web_rex_trial {
    background-color: #c8f1c8;
    padding: 5px;
    text-align: center;
    border: 1px solid gray;
    margin-bottom: -1px;
    
}


.training-2022 .card {
    background-color: #006B98;
}

.training-2022 .card .collapse,
.training-2022 .card .collapsing {
    background-color: white;
}

.training-2022 button {
    color: white;
    white-space: normal;
}

.training-2022 button:hover {
    color: white;
}

.bottom-banner {
    width: 100%;
    background-color: #c8f1c8;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    text-align: center;
    margin-bottom: 40px;
    font-size: 130%;
    padding: 5px;
}

.ad-info-bottom {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    font-size: 125%;
    padding: 5px;
}

.training-learn-more h2 {
    margin-bottom: 30px;
}

.training-learn-more p {
    text-align: left;
}


/*

  ___ _____ _   _ _____ ____  
 / _ \_   _| | | | ____|  _ \ 
| | | || | | |_| |  _| | |_) |
| |_| || | |  _  | |___|  _ < 
 \___/ |_| |_| |_|_____|_| \_\

*/

.support-ticket {
    max-width: 600px;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;

}

.nicEdit-main {
    padding: 5px;
}

.form-1a {
    /* Size & position */
    width: 400px;
    top: 20px;
    right: calc(50% - 200px);
    padding: 10px;
    position: fixed; /* For the submit button positioning */

    /* Styles */
    box-shadow: 
        0 0 1px rgba(0, 0, 0, 0.3), 
        0 3px 7px rgba(0, 0, 0, 0.3), 
        inset 0 1px rgba(255,255,255,1),
        inset 0 -3px 2px rgba(0,0,0,0.25);
    border-radius: 5px;
    background: linear-gradient(#eeefef, #ffffff 10%);
}

.form-1a .field {
    position: relative; /* For the icon positioning */
}

.form-1a .field i {
    /* Size and position */
    left: 0px;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;

    /* Line */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

    /* Styles */
    color: #777777;
    text-align: center;
    line-height: 42px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

.form-1a input[type=text],
.form-1a input[type=password] {
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);

    /* Size and position */
    width: 100%;
    padding: 10px 18px 10px 45px;

    /* Styles */
    border: none; /* Remove the default border */
    box-shadow: 
        inset 0 0 5px rgba(0,0,0,0.1),
        inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    transition: color 0.3s ease-out;
}

.form-1a input[type=text] {
    margin-bottom: 10px;
}

.form-1a input[type=text]:hover ~ i,
.form-1a input[type=password]:hover ~ i {
    color: #52cfeb;
}

.form-1a input[type=text]:focus ~ i,
.form-1a input[type=password]:focus ~ i {
    color: #42A2BC;
}

.form-1a input[type=text]:focus,
.form-1a input[type=password]:focus,
.form-1a button[type=submit]:focus {
    outline: none;
}

.form-1a .submit {
    /* Size and position */
    width: 65px;
    height: 65px;
    position: absolute;
    top: 17px;
    right: -25px;
    padding: 10px;
    z-index: 2;

    /* Styles */
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 
        0 0 2px rgba(0,0,0,0.1),
        0 3px 2px rgba(0,0,0,0.1),
        inset 0 -3px 2px rgba(0,0,0,0.2);
}

.form-1a .submit:after {
    /* Size and position */
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: -2px;
    left: 30px;

    /* Styles */
    background: #ffffff;
    
    /* Other masks trick */
    box-shadow: 0 62px white, -32px 31px white;
}

.form-1a button {
    /* Size and position */
    width: 100%;
    height: 100%;
    margin-top: -1px;

    /* Icon styles */
    font-size: 1.4em;
    line-height: 1.75;
    color: white;

    /* Styles */
    border: none; /* Remove the default border */
    border-radius: inherit;
    background: linear-gradient(#52cfeb, #42A2BC);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 1px 2px rgba(0,0,0,0.35),
        inset 0 3px 2px rgba(255,255,255,0.2),
        inset 0 -3px 2px rgba(0,0,0,0.1);

    cursor: pointer;
}

.form-1a button:hover,
.form-1a button[type=submit]:focus {
    background: #52cfeb;
    transition: all 0.3s ease-out;
}

.form-1a button:active {
    background: #42A2BC;
    box-shadow: 
        inset 0 0 5px rgba(0,0,0,0.3),
        inset 0 3px 4px rgba(0,0,0,0.3);
}

.w4rAnimated_checkmark svg {
    width: 100px;
    display: block;
    margin: 40px auto 0;
  }
  .w4rAnimated_checkmark .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
  }
  .w4rAnimated_checkmark .path.circle {
    -webkit-animation: dash 0.9s ease-in-out;
    animation: dash 0.9s ease-in-out;
  }
  .w4rAnimated_checkmark .path.line {
    stroke-dashoffset: 1000;
    -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
    animation: dash 0.9s 0.35s ease-in-out forwards;
  }
  .w4rAnimated_checkmark .path.check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
    animation: dash-check 0.9s 0.35s ease-in-out forwards;
  }
  
  @-webkit-keyframes dash {
    0% {
      stroke-dashoffset: 1000;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes dash {
    0% {
      stroke-dashoffset: 1000;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  @-webkit-keyframes dash-check {
    0% {
      stroke-dashoffset: -100;
    }
    100% {
      stroke-dashoffset: 900;
    }
  }
  @keyframes dash-check {
    0% {
      stroke-dashoffset: -100;
    }
    100% {
      stroke-dashoffset: 900;
    }
  }
  
  
  
  
  .animation-ctn{
    text-align:center;
    margin-top:5em;
  }
  
      @-webkit-keyframes checkmark {
      0% {
          stroke-dashoffset: 100px
      }
  
      100% {
          stroke-dashoffset: 200px
      }
  }
  
  @-ms-keyframes checkmark {
      0% {
          stroke-dashoffset: 100px
      }
  
      100% {
          stroke-dashoffset: 200px
      }
  }
  
  @keyframes checkmark {
      0% {
          stroke-dashoffset: 100px
      }
  
      100% {
          stroke-dashoffset: 0px
      }
  }
  
  @-webkit-keyframes checkmark-circle {
      0% {
          stroke-dashoffset: 480px
     
      }
  
      100% {
          stroke-dashoffset: 960px;
        
      }
  }
  
  @-ms-keyframes checkmark-circle {
      0% {
          stroke-dashoffset: 240px
      }
  
      100% {
          stroke-dashoffset: 480px
      }
  }
  
  @keyframes checkmark-circle {
      0% {
          stroke-dashoffset: 480px 
      }
  
      100% {
          stroke-dashoffset: 960px
      }
  }
  
  @keyframes colored-circle { 
      0% {
          opacity:0
      }
  
      100% {
          opacity:100
      }
  }
  
  /* other styles */
  /* .svg svg {
      display: none
  }
   */
  .inlinesvg .svg svg {
      display: inline
  }
  
  /* .svg img {
      display: none
  } */
  
  .icon--order-success svg polyline {
      -webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
      animation: checkmark 0.25s ease-in-out 0.7s backwards
  }
  
  .icon--order-success svg circle {
      -webkit-animation: checkmark-circle 0.6s ease-in-out backwards;
      animation: checkmark-circle 0.6s ease-in-out backwards;
  }
  .icon--order-success svg circle#colored {
      -webkit-animation: colored-circle 0.6s ease-in-out 0.7s backwards;
      animation: colored-circle 0.6s ease-in-out 0.7s backwards;
  } 


/*

 __  __  ___  ____ ___ _     _____    ____ ____ ____  
|  \/  |/ _ \| __ )_ _| |   | ____|  / ___/ ___/ ___| 
| |\/| | | | |  _ \| || |   |  _|   | |   \___ \___ \ 
| |  | | |_| | |_) | || |___| |___  | |___ ___) |__) |
|_|  |_|\___/|____/___|_____|_____|  \____|____/____/ 

*/
@media screen and (max-width: 800px) {

    .hide-mobile {
        display: none;
    }

    .show-mobile {
        display: inherit;
    }

    .header-buffer {
        height: 47px;
    }

    .nav-item {
        margin-left: 10px;
    }

    .form-1a {
        width: 80%;
        right: 10%;
    }

    .index-panel-section {
        padding: 30px 15px;

    }

    .carousel-control-next,
    .carousel-control-prev {
        width: 20px;
    }

    .carousel-item .carousel-item-content {
        width: calc(100% - 40px);
        margin-left: 20px;
        padding: 10px;
        flex-direction: column;
        padding: 20px;
    }


    .carousel-item .carousel-item-content img {
        width: 90%;
        margin-left: 5%;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .scrolling-panels {
        align-content: space-around;
    }

    .index-panel-section .index-panel {
        flex: 0 0 calc(100% - 30px);
        margin: 15px;
    }

    .index-panel-btn-right {
        color: gray;
        border: none;
        background-color: transparent;
        font-size: 3.5em;
        cursor: pointer;
        position: relative;
        float: right;
        
    }
    
    .index-panel-btn-left {
        color: gray;
        border: none;
        background-color: transparent;
        font-size: 3.5em;
        cursor: pointer;
        position: relative;
    }

    .index-qa {
        padding: 30px 15px;
    }

    .turn-the-key {
        padding: 10px;
        background-color: white;
        border: 1px solid black;
        color: black;
        font-size: 0.85em;
        width: 100%;
        margin-left: 0px;
    }

    .tutorial_table_container {
        position: relative;
        height: auto;
        overflow-y: auto;
        width: 100%;
        padding: 0px;
        top: 0;
      }

      .tutorial-js {
          padding: 0 !important;
          overflow-y: auto;
      }

    .training-2022 {
        padding: 10px 10px 100px 10px;
    }

    .training-2022 h1 {
        margin-bottom: 30px;
        font-size: 18pt;
    }

    .training-2022 .webrex_section_table {
        width: 100%
    }

    .webrex_section_table tr:nth-child(3) td {
        height: 200px;
    }

    .training-2022 .webrex_pricing_table {
        font-size: 11pt;
    }

    .training-2022 .webrex_pricing_table td,
    .training-2022 .webrex_pricing_table th {
        padding: 10px 5px;
    }

    .eval-area {
        padding: 10px;
        width: 100%;
        margin-left: 0px;
    }

}