/* Semantic UI has these classes, however they're only applicable to*/
/* grids, containers, rows and columns.*/
/* plus, there isn't any `mobile hidden`, `X hidden` class.*/
/* this snippet is using the same class names and same approach*/
/* plus a bit more but to all elements.*/
/* see https://github.com/Semantic-Org/Semantic-UI/issues/1114*/

/* Mobile */
@media only screen and (max-width: 767px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large screen only"]:not(.mobile),
  [class*="widescreen only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}

/* Tablet / iPad Portrait */
/* old values [max-width:991px] */
@media only screen and (min-width: 768px) and (max-width: 1551px) {
  [class*="mobile only"]:not(.tablet),
  [class*="tablet hidden"],
  [class*="computer only"]:not(.tablet),
  [class*="large screen only"]:not(.tablet),
  [class*="widescreen only"]:not(.tablet),
  [class*="or lower hidden"]:not(.mobile) {
    display: none !important;
  }
}

/* Computer / Desktop / iPad Landscape */
/* old values [min-width:992px] [max-width:1199]*/
@media only screen and (min-width: 1551) and (max-width: 1919px) {
  [class*="mobile only"]:not(.computer),
  [class*="tablet only"]:not(.computer),
  [class*="computer hidden"],
  [class*="large screen only"]:not(.computer),
  [class*="widescreen only"]:not(.computer),
  [class*="or lower hidden"]:not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Large Monitor */
/* old values [min-width:1200] */
@media only screen and (min-width: 1551px) and (max-width: 1919px) {
  [class*="mobile only"]:not([class*="large screen"]),
  [class*="tablet only"]:not([class*="large screen"]),
  [class*="computer only"]:not([class*="large screen"]),
  [class*="large screen hidden"],
  [class*="widescreen only"]:not([class*="large screen"]),
  [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Widescreen Monitor */
@media only screen and (min-width: 1920px) {
  [class*="mobile only"]:not([class*="widescreen"]),
  [class*="tablet only"]:not([class*="widescreen"]),
  [class*="computer only"]:not([class*="widescreen"]),
  [class*="large screen only"]:not([class*="widescreen"]),
  [class*="widescreen hidden"],
  [class*="widescreen or lower hidden"] {
    display: none !important;
  }
}

/* ========================================
   RTL Support - Override Semantic UI
   ======================================== */

/* Base RTL Styles */
body.rtl-mode {
    direction: rtl !important;
    text-align: right !important;
}

/* Semantic UI Form Overrides */
body.rtl-mode .ui.form .field > label,
body.rtl-mode .ui.form .fields > label {
    text-align: right !important;
}

body.rtl-mode .ui.form input:not([type]),
body.rtl-mode .ui.form input[type="date"],
body.rtl-mode .ui.form input[type="datetime-local"],
body.rtl-mode .ui.form input[type="email"],
body.rtl-mode .ui.form input[type="number"],
body.rtl-mode .ui.form input[type="password"],
body.rtl-mode .ui.form input[type="search"],
body.rtl-mode .ui.form input[type="tel"],
body.rtl-mode .ui.form input[type="time"],
body.rtl-mode .ui.form input[type="text"],
body.rtl-mode .ui.form input[type="file"],
body.rtl-mode .ui.form input[type="url"] {
    text-align: right !important;
}

body.rtl-mode .ui.form textarea {
    text-align: right !important;
}

/* Semantic UI Dropdown */
body.rtl-mode .ui.selection.dropdown {
    text-align: right !important;
    padding-left: 2.1em !important;
    padding-right: 1em !important;
}

body.rtl-mode .ui.selection.dropdown > .dropdown.icon {
    left: 1em !important;
    right: auto !important;
}

body.rtl-mode .ui.dropdown .menu {
    text-align: right !important;
}

body.rtl-mode .ui.dropdown .menu > .item {
    text-align: right !important;
}

/* Semantic UI Button */
body.rtl-mode .ui.button {
    text-align: center !important;
}

/* Semantic UI Grid */
body.rtl-mode .ui.grid {
    direction: rtl !important;
}

body.rtl-mode .ui.grid > .column:not(.row),
body.rtl-mode .ui.grid > .row > .column {
    text-align: right !important;
}

/* Semantic UI Container */
body.rtl-mode .ui.container {
    direction: rtl !important;
    text-align: right !important;
}

/* Semantic UI Segment */
body.rtl-mode .ui.segment {
    text-align: right !important;
}

/* Semantic UI Card */
body.rtl-mode .ui.card,
body.rtl-mode .ui.cards > .card {
    text-align: right !important;
}

body.rtl-mode .ui.card > .content,
body.rtl-mode .ui.cards > .card > .content {
    text-align: right !important;
}

/* Semantic UI Table */
body.rtl-mode .ui.table {
    text-align: right !important;
}

body.rtl-mode .ui.table th,
body.rtl-mode .ui.table td {
    text-align: right !important;
}

/* Semantic UI Menu */
body.rtl-mode .ui.menu {
    direction: rtl !important;
}

body.rtl-mode .ui.menu .item {
    text-align: right !important;
}

/* Semantic UI Input */
body.rtl-mode .ui.input input {
    text-align: right !important;
}

/* Semantic UI Message */
body.rtl-mode .ui.message {
    text-align: right !important;
}

/* Semantic UI Modal */
body.rtl-mode .ui.modal > .header,
body.rtl-mode .ui.modal > .content,
body.rtl-mode .ui.modal > .actions {
    text-align: right !important;
}

/* Fix checkbox and radio alignment */
body.rtl-mode .ui.checkbox {
    text-align: right !important;
}

body.rtl-mode .ui.checkbox label {
    padding-left: 0 !important;
    padding-right: 4.85714em !important;
}

body.rtl-mode .ui.checkbox input[type="checkbox"],
body.rtl-mode .ui.checkbox input[type="radio"] {
    left: auto !important;
    right: 0 !important;
}

body.rtl-mode .ui.checkbox label:before,
body.rtl-mode .ui.checkbox label:after {
    left: auto !important;
    right: 0 !important;
}