/* Content Variables */
/* Header Variables */
/* Button Variables */
/* Border Variables */
/* My Labels */
* {
  box-sizing: border-box;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 16px;
	cursor:default;
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
  -o-user-select: none;
	user-select: none;
}

@font-face {
  	font-family: 'New';
  	src: url("fonts/new.ttf") format("truetype");
}

html {
  height: 100%;
}

body {
  position: relative;
  background-color: #ffffff;
  margin: 0;
  padding-bottom: 0px;
  min-height: 100%;
  background-color: #FFFFFF;
  background-image: url("http://antarctica-ufo.com/images/snow_bg.jpg");
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,latin-ext);

.tooltips {
  position: relative;
  display: inline;
}

.tooltips span {
  font:300 13px 'Open Sans', sans-serif;
  position: absolute;
  color: #FFFFFF;
  background: #000000;
  padding:5px 10px;
  width:180px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: transform .3s, opacity .6s, margin-left .2s, margin-top .2s;
}

.tooltips > span img{max-width:100px;}

.tooltips[tooltip-position="top"] span{
  padding-bottom:8px;
  -ms-transform: rotate(30deg); 
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.tooltips[tooltip-position="bottom"] span{
  padding-bottom:8px;
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.tooltips[tooltip-position="left"] span{
  left:-190px;
  padding-bottom:8px;   /* add width here */
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.tooltips[tooltip-position="right"] span{
  margin-top:30px;
  padding-bottom:8px;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.tooltips span:after {
  content: '';
  position: absolute;
  width: 0; height: 0;
}

.tooltips[tooltip-position="top"] span:after{
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid transparent;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.tooltips[tooltip-position="bottom"] span:after{
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  border-bottom: 8px solid transparent;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.tooltips[tooltip-position="left"] span:after{
  top: 50%;
  left: 100%;
  margin-top: -8px;
  border-left: 0px solid transparent;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.tooltips[tooltip-position="right"] span:after{
  top: 50%;
  right: 100%;
  margin-top: -8px;
  border-right: 8px solid transparent;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.tooltips:hover span {
  visibility: visible;
  opacity: 1;
  z-index: 999;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  filter: alpha(opacity=100);
}

.tooltips[tooltip-position="top"]:hover span{
  bottom: 25px;
  left: 50%;
  margin-left: -93px;
  padding-bottom:11px;
}

.tooltips[tooltip-position="bottom"]:hover span{
  top: 25px;
  left: 50%;
  margin-left: -70px;
  padding-top:10px;
  padding-bottom:11px;
}

.tooltips[tooltip-position="left"]:hover span{
  right: 100%;
  top: 50%;
  margin-left:10px;
  margin-top: -15px;
  padding-bottom:11px;
}

.tooltips[tooltip-position="right"]:hover span{
  left: 100%;
  top: 50%;
  margin-right:15px;
  margin-top: -15px;
  margin-left: 15px;
  padding-bottom:11px;
}

.tooltips[tooltip-type="primary"] > span {
  background-color:#2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="top"] > span:after{
  border-top: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="left"] > span:after{
  border-left: 8px solid #2980b9;
}

.tooltips[tooltip-type="primary"][tooltip-position="right"] > span:after{
  border-right: 8px solid #2980b9;
}

.tooltips[tooltip-type="success"] > span {
  background-color:#27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="top"] > span:after{
  border-top: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="left"] > span:after{
  border-left: 8px solid #27ae60;
}

.tooltips[tooltip-type="success"][tooltip-position="right"] > span:after{
  border-right: 8px solid #27ae60;
}

.tooltips[tooltip-type="warning"] > span {
  background-color:#f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="top"] > span:after{
  border-top: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="left"] > span:after{
  border-left: 8px solid #f39c12;
}

.tooltips[tooltip-type="warning"][tooltip-position="right"] > span:after{
  border-right: 8px solid #f39c12;
}

.tooltips[tooltip-type="danger"] > span {
  background-color:#c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="top"] > span:after{
  border-top: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="bottom"] > span:after{
  border-bottom: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="left"] > span:after{
  border-left: 8px solid #c0392b;
}

.tooltips[tooltip-type="danger"][tooltip-position="right"] > span:after{
  border-right: 8px solid #c0392b;
}

.navtop {
  background-color: #86B0B6;
  height: 70px;
  width: 100%;
  border: 0;
}

.navtop div {
  display: flex;
  margin: 0 auto;
  width: 700px;
  height: 100%;
}

.navtop div h1, .navtop div a {
  display: inline-flex;
  align-items: center;
}

.navtop div h1 {
  flex: 1;
  padding: 0;
  margin: 0;
  color: #00383F;
}

.navtop div h1 a {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.31);
  font-weight: 650;
  font-size:40px;
  padding: 0;
  color: #00383F;
  font-family: New, 'Candara', 'Verdana', cursive;
	text-align: center;
	font-style: italic;
  margin-bottom:4px;
}

.navtop div h1 a:hover {
  font-weight: 650;
  padding: 0;
  color: #005b67;
  font-family: New, 'Candara', 'Verdana', cursive;
	text-align: center;
	font-style: italic;
}

.navtop div a {
  padding: 0 14px;
  text-decoration: none;
  color: #00383F;
  font-weight: 700;
  font-size: 18px;
  padding-bottom:1px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.28);
}

.navtop div a i {
  font-size: 19px;
  padding: 2px 8px 0 0;
}

.navtop div a:hover {
  color: #ebebeb;
}

.page-content {
  padding: 0 15px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.page-content p {
  padding: 25px 0;
  margin: 0;
}

.page-title h2 {
  display: inline-block;
  padding: 0px 0px 15px 0px;
  font-size: 22px;  /* My Titles My Title Upload Media */
  font-weight: 600;
  border-bottom: 3px solid #00363d;
  color: #00171b;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.23);
}

.thumbnail-frame {
  background:white;
  padding:12px 10px 13px 0px;    /*  My White Box My White Background */
  margin: 0px 10px 0px 10px;
  border-radius:6px;
  width:100%;
}



.gallery-form, .auth-form {
  padding: 15px 0;
  display: flex;
  flex-flow: column;
  max-width: 700px;
  width: 100%;
}
.gallery-form label, .auth-form label {
  display: inline-flex;
  width: 100%;
  padding: 10px 0;
  margin-right: 25px;
  font-weight: 600;
  color: #00383F;     /* My Labels */
  font-size: 16px;
}
.gallery-form select, .gallery-form input, .gallery-form textarea, .auth-form select, .auth-form input, .auth-form textarea, .gallery-form input[type="file"] {
  padding: 8px;
  width: 100%;
  border-radius: 7px;
  outline: 0;
  border: 1px solid #e6e2e2;
  color: #474444;  /*  My Inputs & My Text Areas  */
  resize: vertical;
  cursor: default;
  margin: 0px 10px 10px 10px;
}
.gallery-form input, .gallery-form textarea, .auth-form input, .auth-form textarea {
  cursor:text;
}
.gallery-form textarea, .auth-form textarea {
  height: 220px;
  min-height: 100px;    /* My TextArea My Text Area */
  max-height: 300px;
}
.gallery-form select, .auth-form select {
  color: black;   /*  My Select Input */
  background-color:white;
}
.gallery-form select:focus, .gallery-form input:focus, .gallery-form textarea:focus, .auth-form select:focus, .auth-form input:focus, .auth-form textarea:focus {
  border: 1px solid #c3b9b9;
}
.gallery-form select::placeholder, .gallery-form input::placeholder, .gallery-form textarea::placeholder, .auth-form select::placeholder, .auth-form input::placeholder, .auth-form textarea::placeholder {
  color: #9c9c9c;  /* My Placeholders */
}
.gallery-form textarea, .auth-form textarea {
  height: 150px;
}
.gallery-form #media, .auth-form #media {
  display: none;
}
.gallery-form #media-upload-drop-zone, .auth-form #media-upload-drop-zone {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 4px dashed #00383F;      /*  My Drop Box My Drop Zone */
  outline: 0.11em solid #00383F;
  background-color: #C5D9DC;
  color: #00383F;
  padding: 15px;
  margin: 0 0 40px 0;
  border-radius: 10px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 1), 0px 0px 3px rgba(0, 0, 0, 1), 0px 0px 3px rgba(0, 0, 0, 1);
}
.gallery-form #media-upload-drop-zone p, .auth-form #media-upload-drop-zone p {
  font-size: 20px;
  font-weight: 700;
  color: #00383F;
  text-align: center;
  padding: 0px 5px 8px 5px;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, .25);
}
.maximum {
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, .25);
}
.gallery-form #media-upload-drop-zone p.drop-zone-filesize, .auth-form #media-upload-drop-zone p.drop-zone-filesize {
  font-size: 17px;
  font-weight: 400;
  color: #00383F;
  text-align: center;
  padding: 0 5px 10px 5px;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, .3);
}
.gallery-form #media-upload-drop-zone svg, .auth-form #media-upload-drop-zone svg {
  fill: #00383F;
  margin: 5px;
}
.gallery-form #media-upload-drop-zone i, .auth-form #media-upload-drop-zone i {
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.95), 0px 0px 1px rgba(0, 0, 0, 0.95), 0px 0px 1px rgba(0, 0, 0, 0.95);
  font-size: 76px;
  padding: 12px 0px 8px 0px;
}

.gallery-form #media-upload-drop-zone.dragover, .gallery-form #media-upload-drop-zone:hover, .auth-form #media-upload-drop-zone.dragover, .auth-form #media-upload-drop-zone:hover {
  border: 4px dashed #00383F;
  background-color: #95b9be;
  box-shadow: 0px 0px 22px rgba(0, 0, 0, 1);
}
.gallery-form .media-list, .auth-form .media-list {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding-bottom: 15px;
}
.gallery-form .media, .auth-form .media {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #e6e2e2;
  width: 100%;
  background:#C5D9DC;   /* My Upload Block */
  outline: 0.11em solid #00383F;
  margin: 15px 0px 30px 0px;
  min-height:120px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 1), 0px 0px 3px rgba(0, 0, 0, 1), 0px 0px 3px rgba(0, 0, 0, 1);
}
.gallery-form .media video, .gallery-form .media img, .gallery-form .media audio, .auth-form .media video, .auth-form .media img, .auth-form .media audio {
  width: 100%;
  max-width: 150px;
  max-height: 150px;       /*  My Thumbnail My Thumbs */
  height: auto;
  object-fit: contain;
}
.thumbnail-previews {
  
  width: 250px;
  height: 250px;       /*  My Thumbnail My Thumbs */
  height: auto;
  object-fit: contain;
}

.gallery-form .media audio, .auth-form .media audio {
  width: 150px;
  height: 50px;
}
.gallery-form .media .media-preview-info, .auth-form .media .media-preview-info {
  flex: 1;
  margin-top:7px;
}

.media-preview img, .media-preview video, .media-preview audio {
  margin-top:10px;
}

.gallery-form .media .media-preview-info h3, .auth-form .media .media-preview-info h3 {
  margin: 0;
  padding: 0 0 0px 0;
  font-size: 19px;
  font-weight: 650;
  display: block;
  max-width: 440px;
  word-break: break-word;
  color: #00383F;    /*  My Upload Titles My Upload Block Titles My Titles */
}
.gallery-form .media .media-preview-info p, .auth-form .media .media-preview-info p {
  margin: 0;
  padding: 0 0 5px 0;
  font-size: 18px;
  color: #00383F;  /*  My Upload File Type My Upload Block Upload Size */
}
.p2 {
  margin: 0;
  padding: 0 0 4px 0;
  font-size: 14px;
  color: #00383F;
}
.gallery-form .media .media-options, .auth-form .media .media-options {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding-bottom:0px;
}
.gallery-form .media .media-options a, .auth-form .media .media-options a {
  text-decoration: none;
}
.gallery-form .media .media-options a i, .auth-form .media .media-options a i {
  font-size:28px;   /* My Upload Block Buttons Upload Buttons My Upload Buttons My Buttons */
  color: #00383F;
}
.gallery-form .media .media-options a:hover i, .auth-form .media .media-options a:hover i {
  font-size:28px;
  color: #86B0B6;
}
.gallery-form .media .media-options a.media-remove-btn, .auth-form .media .media-options a.media-remove-btn {
  font-size:34px;
  margin-right: 3px;
}
.gallery-form .media .media-dropdown-options, .auth-form .media .media-dropdown-options {
  display: none;
  width: 100%;
  border-top: 1px solid #00383F;
  padding-top:10px;
}
.gallery-form .media .media-dropdown-options.active, .auth-form .media .media-dropdown-options.active {
  display: flex;
  flex-flow: column;
}

.gallery-form .btn-wrapper, .auth-form .btn-wrapper, .gallery-form .btn-wrapper2, .auth-form .btn-wrapper2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}
.btn-wrapper4 {
  text-align:center;
  align-items:center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}
.gallery-form .upload-result, .gallery-form .result, .auth-form .upload-result, .auth-form .result, .gallery-form .upload-result2, .auth-form .upload-result2 {
  font-size: 17px;
  font-weight: 600;
  color: #00383F;   /* My Upload Results My Results */
  text-shadow: 0px 0px 1px rgba(0, 0, 0, .5);
  padding-bottom:15px;     /* Upload Complete  Upload Results */
}
.gallery-form .form-link, .auth-form .form-link {
  text-decoration: none;
  background-color: #86B0B6;
  color: #00383F;     /*  My Select Frame My Frame Slect My Video Frame */
  border-radius:6px;
  font-size: 15px;
  font-weight: 550;
  padding: 4px 10px 4px 10px;
  width: fit-content;
  outline:2px solid #ffffff00;
  border:2px solid #171717;
  margin:0px 0px 5px 9px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.gallery-form .form-link:hover, .auth-form .form-link:hover {
  background-color: #00383F;
  color: #86B0B6;
}

.auth-form {
  max-width: 300px;
}
.auth-form .btn-wrapper, .auth-form .btn-wrapper2 {
  display: flex;
  padding-top: 20px;
}

.alt-form {
  padding-top: 0;
  max-width: 400px;
}
.alt-form .btn-wrapper, .alt-form .btn-wrapper2 {
  display: flex;
  padding-top: 20px;
  gap: 10px;
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: 0;
  background: #86B0B6;
  color: #00383F;
  padding: 14px 17px 16px 17px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  outline:2px solid black;    /* My Upload Button My Button */
  outline-offset: -2px;
  margin-bottom:13px;
}
.btn:has(svg) {
  padding: 0 18px 0 14px;
}
.btn svg {
  margin-right: 7px;
  fill: #e5b9b9;
}
.btn:hover {
  background-color: #00383F;
  color: #86B0B6;
}
.btn:disabled, .btn:disabled:active {
  background-color: rgb(203, 203, 203);
  color: #00383F;
  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 1), 0px 0px 2px rgba(0, 0, 0, 0.5);
  outline:0px;      /* My Disabled Button My Button Disabled */
  cursor:default;
}
.btn.alt {
  background-color: #9e9e9e;
}
.btn.alt:hover {
  background-color: #383838;
}
.btn.alt:disabled {
  background-color: #b9b9b9;
}
.btn:active {
  color: #00383F;
  background-color: #00383F;  flex-wrap: wrap;
  gap: 25px;
  outline:2px solid black;
  outline-offset: -1px;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1),0px 0px 5px rgba(255, 255, 255, 0.8),0px 0px 5px rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 1),0px 0px 5px rgba(0, 0, 0, 0.8),0px 0px 5px rgba(0, 0, 0, 0.8);
}

.media-save, .media-select-frame {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999999;
}
.media-save h2 {
  font-weight: 600;
  text-align: center;
  font-size: 22px;   /* My Select Frame Title */
  color: black;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, .95);
  margin: 0;
  padding: 0px 0 5px 0;
}
.media-select-frame h2 {
  font-weight: 700;
  text-align: center;
  font-size: 23px;   /* My Select Frame Title */
  color: black; 
  text-shadow: 0px 0px 1px rgb(0,56,63,0.26);
  margin: 0;
  padding: 5px 0 4px 0;
}

.media-save .con, .media-select-frame .con {
  padding: 10px 25px;
  width: 100%;
  max-width: 300px;
  background-color: #fff;
  border-radius: 10px;
}
.media-save .btn-wrapper, .media-select-frame .btn-wrapper, .media-save .btn-wrapper2, .media-select-frame .btn-wrapper2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 15px 0;
  gap: 25px;
}
.media-save video, .media-select-frame video {
  margin-top: 15px;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
}
.media-save input[type=range], .media-select-frame input[type=range] {
  margin: 20px 0;
  width: 100%;
}
.media-save input[type=submit], .media-select-frame input[type=submit] {
  margin: 15px 10px 0 0;
}

input[type=file]::file-selector-button {
    border: 2px solid #00383F;
    padding: .2em .4em;
    border-radius: 6px;
    background-color: #86B0B6;
    color: #00383F;
    padding-bottom:4px;
    padding-left:10px;
    margin-right:10px;
    font-size:15px;
    font-weight:500;
}
input[type=file]::file-selector-button:hover {
    background-color: #00383F;
    border: 2px solid black;
    color: #86B0B6;
}

.media-save p, .media-select-frame p {
  margin: 0;
  padding: 5px 0 0 0;
}

.media-select-frame .con {
  background:#e4e4e4;       /*  My Video Frame Selection My Frame Selection */
  max-width: 580px;
}

p.error-msg {
  color: #be5151;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  margin: 25px 0;
}

.no-touch {
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
  -o-user-select: none;
	user-select: none;
}
.yes-touch {
  -webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
  -o-user-select: text;
	user-select: text;
}

.browse-file-bg {
  background:white; /* My file input My Upload File My Upload Background My File Background */
}










/* Responsive design code below */
@media screen and (max-width: 700px) {

.tooltips span {
  font:300 11px 'Open Sans', sans-serif;
}
.navtop div h1 a {
  font-size:32px;
}
 .navtop {
    height: auto;
    padding: 10px;
  }
  .navtop div {
    flex-flow: wrap;
    width: 100%;
  }
  .navtop div h1 {
    display: block;
    flex-basis: 100%;
    font-size:12px;
  }
  .navtop div h1 i {
      display:none;
  }
  .navtop div a {
    padding: 8px 0;
    flex-basis: 50%;
  }
  .navtop, .navtop h1 {
  padding-top:4px;
  margin-top:0px;
}
.navtop div a {
  padding-top:0px;
  margin-top:4px;
  padding-bottom:0px;
  margin-bottom:11px;
}

}